Bootstrap 3 Grid: Overflowing columns behavior

I'm currently using this layout:

<div class="row">
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <!-- and on and on -->
</div>

The content in each column is variable in size, this causes a strange flow in the browser. Something like this.

As you can see, columns 4,5,6 are in a new "row". and columns 7 and 8 have skipped a whole column. These behaviors are not desireable, Instead I want the columns to flow like so.

In this situation every column hugs the column it's under. I haven't found a fix yet for this problem. I have looked into clearfix. and it does not seem to help the situation, as it just moves a column to a newline/row.