How can I ensure columns wrap equally in Twitter Bootstrap 3?

Question

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?

I have

<div class="row">
    <!-- 1st col --><div class="col-md-3 col-sm-4 col-xs-6"><h1>Title lorem</h1><p>Short</p></div>
    <!-- 2nd col --><div class="col-md-3 col-sm-4 col-xs-6"><h1>Title lorem</h1><p>Description lorem</p></div>
    ...
    <!-- nth col --><div class="col-md-3 col-sm-4 col-xs-6"><h1>Title lorem</h1><p>Description lorem that might be long</p></div>
</div>

The columns will have varying heights, which can sometimes lead to unequally distributed columns:

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?

Answer 1

There is the way to clear Bootstrap columns as mentioned by Maciej. This can be done this way:

 .col-lg-3:nth-child(4n+1){
   clear: left;
 }

The article contains full source which makes it work universally from sm to lg.

Answer 2

If I understood your problem correctly, it should be enough to just apply .clearfix accordingly after each set of elements that need to be in one line.

Check the example

And alternative solution is to use CSS :nth-child pseudo-class in combination with media queries. For each resolution, there would be a different n-th element with clear:both, that would create a new row.

Take a look at a quick overview how to use :nth-child.