title: How to stack divs on top of each other when screen gets smaller? bootstrap
body: <p>I have three divs side to side, I want them to stack on top of each other when screen gets smaller. instead, the divs resize making content look bad.</p>
  
  <p>I followed the w3schools tutorial (bootstrap_grid_stacked_to_horizontal) to make them stack by putting them inside a <code>container</code> div and a <code>row</code> div in addition to adding the class <code>col-lg-4</code> but they still resize.</p>
  
  <p>This is relevant HTML and CSS:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.how-it-works-container{
       padding: 50px;
       background-color: #C5B358;
       font-family: 'Montserrat', sans-serif;
       opacity: .8;
       text-align: center;
      
       width: 100%
      }
   
      .how-it-works-box{
       padding: 30px;
       background-color: #D6C362;
       margin: 20px 5px;
       
       width: calc(30%);
       overflow-wrap: break-word;
       color: white;
       display: inline-block;
       box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- How It Works section --&gt;
  &lt;div class="how-it-works-container container"&gt;
  
      &lt;h2&gt;How It Works&lt;/h2&gt;
  
    &lt;div class="row"&gt;
  
        &lt;div class="how-it-works-box col-lg-4"&gt; 
          &lt;img src=" {% static "images/meetlocals3.svg" %} "&gt; 
          &lt;h3&gt;Meet Local People&lt;/h3&gt;
          &lt;p&gt;Meet like-minded locals who could show you around their city.&lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div class="how-it-works-box col-lg-4"&gt;
          &lt;img src=" {% static "images/showpeople.svg" %} "&gt;
          &lt;h3&gt;Show Visitors Around&lt;/h3&gt;
          &lt;p&gt;Show visitors around and meet interesting international visitors.&lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div class="how-it-works-box col-lg-4"&gt;
          &lt;img src=" {% static "images/makefriends.svg" %} "&gt;
          &lt;h3&gt;Make New Friends!&lt;/h3&gt;
          &lt;p&gt;Walking around is a fun bonding activity to make new friends!&lt;/p&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>