title: How to change number of column in a row on resize - Bootstrap
body: <p>I need some help to change number of columns in a row dynanamically when resizing window. For example, for large and medium screen, there should be 3 columns in a row, for small there should be 2 and for extra small only 1 column</p>
  
  <p>Something like this </p>
  
  <p>For large and medium</p>
  
  <p><strong>{col-1}{col-2}{col-3}</strong></p>
  
  <p><strong>{col-4}{col-5}{col-6}</strong></p>
  
  <p>For small</p>
  
  <p><strong>{col-1}{col-2}</strong></p>
  
  <p><strong>{col-3}{col-4}</strong></p>
  
  <p><strong>{col-5}{col-6}</strong></p>
  
  <p>and similar for extra small</p>
  
  <p>What I have done now is made a row and put 3 columns in it</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-lg-4 col-sm-6 col-xs-12"&gt;
      Some content here for column 1
      &lt;/div&gt;
      &lt;div class="col-lg-4 col-sm-6 col-xs-12"&gt;
      Some content here for column 2
      &lt;/div&gt;
      &lt;div class="col-lg-4 col-sm-6 col-xs-12"&gt;
      Some content here for column 3
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-lg-4 col-sm-6 col-xs-12"&gt;
      Some content here for column 4
      &lt;/div&gt;
      &lt;div class="col-lg-4 col-sm-6 col-xs-12"&gt;
      Some content here for column 5
      &lt;/div&gt;
      &lt;div class="col-lg-4 col-sm-6 col-xs-12"&gt;
      Some content here for column 6
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>but using this trick, on small screen it show 2 column in a row, and in next row just 1 column</p>
  
  <p><strong>{col-1}{col-2}</strong></p>
  
  <p><strong>{col-3}</strong></p>
  
  <p><strong>{col-4}{col-5}</strong></p>
  
  <p><strong>{col-6}</strong></p>
  
  <p>Can anybody please help me to get this fixed.</p>
  
  <p>Thanks</p>