Bootstrap change column number at breakpoints - css

Question

I'm having some trouble with a layout I'm producing. I am dealing with blocks of content that are generated from my database, so I'm essentially ending up with:
<div class="container">
<div class="row">
<div class="col-sm-6 col-lg-4 record"></div>
<div class="col-sm-6 col-lg-4 record"></div>
<div class="col-sm-6 col-lg-4 record"></div>
<div class="col-sm-6 col-lg-4 record"></div>
<div class="col-sm-6 col-lg-4 record"></div>
<div class="col-sm-6 col-lg-4 record"></div>
... etc
The problem is, as the columns are floated they are ending up stacking on top of each other in the event that one has more content than the other.
I know that technically I should be using rows like so:
<div class="container">
<div class="row">
<div class="col-sm-6 col-lg-4 record"></div>
<div class="col-sm-6 col-lg-4 record"></div>
</div>
<div class="row">
<div class="col-sm-6 col-lg-4 record"></div>
<div class="col-sm-6 col-lg-4 record"></div>
</div>
<div class="row">
<div class="col-sm-6 col-lg-4 record"></div>
<div class="col-sm-6 col-lg-4 record"></div>
Except, obviously, on larger screens I need to have three elements per row.
Is there a way around this or a CSS rule I can add to clear the floated elements and keep everything lining up at both the lg and sm breakpoint?
Demo: http://codepen.io/EightArmsHQ/pen/RWoMmM

Answer 1

You could add something like this:
/* On medium screens, clear every 2 elements starting at 3rd element */
#media(min-width: 768px) and (max-width: 1199px){
.row > div:nth-child(2n+3){
clear: both;
}
}
/* On large screens, clear every 3 elements starting at 4th element */
#media(min-width: 1200px){
.row > div:nth-child(3n+4){
clear: both;
}
}