title: How can I ensure columns wrap equally in Twitter Bootstrap 3?
body: <p>If I have an unknown number of items to display, each within their own column, is there a way to get them to wrap equally without having to create new rows for each? </p>
  
  <p>I have</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;!-- 1st col --&gt;&lt;div class="col-md-3 col-sm-4 col-xs-6"&gt;&lt;h1&gt;Title lorem&lt;/h1&gt;&lt;p&gt;Short&lt;/p&gt;&lt;/div&gt;
      &lt;!-- 2nd col --&gt;&lt;div class="col-md-3 col-sm-4 col-xs-6"&gt;&lt;h1&gt;Title lorem&lt;/h1&gt;&lt;p&gt;Description lorem&lt;/p&gt;&lt;/div&gt;
      ...
      &lt;!-- nth col --&gt;&lt;div class="col-md-3 col-sm-4 col-xs-6"&gt;&lt;h1&gt;Title lorem&lt;/h1&gt;&lt;p&gt;Description lorem that might be long&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The columns will have varying heights, which can sometimes lead to unequally distributed columns:</p>
  
  <p><img src="https://i.stack.imgur.com/FhknC.png" alt="enter image description here"></p>
  
  <p>Is it possible to get the columns to always wrap in rows of 4 columns (for medium), 3 columns (for small), or 2 columns (for extra-small) with just CSS, or will I need some JS or to use some server side programming to create new rows?</p>