css - Bootstrap Grid System new line does not look nice

Question

Recently, I started making an admin page on my site to edit multiple small tables (1-5 entries). They got all displayed on one page, and the tables got nested in a div as follows:

<div class="row">
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 1-->
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 2-->
    </div>
    ...
</div>

I did this with six tables, and this is how it looks like if they have the same amount of records (one table is one black block):

When now the first table has one more record, the first table is larger and therefore the last div is wrapped to a third row:

What I actually want to achieve (if possible with the boostrap grid system) is that the 6th table does not get wrapped to a third line but just placed a little bit lower, just like this:

Is that possible somehow using or not using boostrap?

This variant would also be acceptable, but not using a table but a responsive layouting (EDIT: This was achieved by using @Skelly 's answer):

Thanks for advice!

---

UPDATE

I just randomly found out one possibility to achieve the first desired variant: You just define one div per column and place all the elements (in this case tables) inside, so they don't rely on each other.

Something like that:

<div class="row">
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 1-->
        <!--table 4-->
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 2-->
        <!--table 5-->
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 3-->
        <!--table 6-->
    </div>
</div>

Answer 1

This is due to varying column height. You need a "clearfix" reset every 3 columns to force even wrapping. One way is to use the approach recommended by Bootstrap, or in this specific case you can use a simple CSS clearfix like this..

@media (min-width:992px) {
    .auto-clear .col-md-4:nth-child(3n+1){clear:left;}
}

Demo: http://codeply.com/go/mONLiFj30T

For other "clearfix" scenarios with different col width and grid tiers, there is a universal CSS only clearfix solution which will fit more scenarios (unsupported).

Another solution would be CSS columns, for a "masonry" style layout, but it doesn't use the Bootstrap grid: http://www.bootply.com/mYkzRDvbEq

See my more complete answer on this issue