title: Bootstrap CSS - Column 3 under Column 2 on resizing
body: <p>This is the sample HTML page I have. On resizing, I have a requirement to display Column3 under Column2 first and on reducing screen width further, display Column3 under Column2 under Column1.</p>
  
  <pre><code>Column1    Column2    Column3
  </code></pre>
  
  <p>On resizing stage 1 (tablet width)</p>
  
  <pre><code>Column1   Column2
            Column3
  </code></pre>
  
  <p>On resizing further (mobile width)</p>
  
  <pre><code>Column1
  Column2
  Column3
  </code></pre>
  
  <p>My current code:</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-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;title&gt;Bootstrap Example&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="jumbotron text-center"&gt;
      &lt;h1&gt;My First Bootstrap Page&lt;/h1&gt;
      &lt;p&gt;Resize this responsive page to see the effect!&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-sm-4"&gt;
          &lt;h3&gt;Column 1&lt;/h3&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit...&lt;/p&gt;
          &lt;p&gt;Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-4"&gt;
          &lt;h3&gt;Column 2&lt;/h3&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit...&lt;/p&gt;
          &lt;p&gt;Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-4"&gt;
          &lt;h3&gt;Column 3&lt;/h3&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit...&lt;/p&gt;
          &lt;p&gt;Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>