dynamically created bootstrap columns with different heights, float to left

Question

Consider an unknown number of divs being created dynamically and styled using the bootstrap grid system. In this example, I'm using col-sm-4 so after every third block, we move to a new row. The blocks (divs) can be different heights, which is determined by the content within.

This is where I run into the layout problem. When moving to a new row, I want the fourth block to float to the left. This only happens when the left most div in the row above is also the shortest. I have pictures to illustrate.

Real Life:

The Dream:

The "correct" way to do this would be to wrap every three in a row class I beleive, but I'm not sure how to do this with dynamic content (could probably hack it) or if there's an easy css solution.

HTML:

<div class="row">
  <div class="col-sm-12">
    <div class="col-sm-4 block">
      <div class="inner-block"></div>
    </div>
    <div class="col-sm-4 block">
      <div class="inner-block"></div>
    </div>
    <div class="col-sm-4 block">
      <div class="inner-block" style="height:150px"></div>
    </div>
    <div class="col-sm-4 block">
      <div class="inner-block"></div>
    </div>
  </div>
</div>

CSS:

.block {
  padding: 5px;
}

.inner-block {
  height: 200px;
  background-color: blue;
}

Plunker Example (expand preview to proper size)

Answer 1

If your system is unable to add first/last classes on every nth div, then you can use the nth-child css pseudo selector.

@media (min-width: 768px) {// For medium displays and above
  .col-sm-4:nth-child(3n+1) { // We target every 3rd div but offset the count by 1 so that that 1st, 4th 7th etc divs are cleared
    clear:both; // Clear the float
  }
}