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

Answer 2

You can solve this in various ways, depending on what you want to use and needed browser support.

---

Grid: The Rambo way
If you're sure your tables won't have more than five records, you could try giving them all an appropriate min-width. Surely not the most elegant of things, though.

---

Grid: The FlexBox way
As you can see from caniuse, FlexBox's browser support nowadays surely isn't bad. By setting this on the container element

.container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

and then doing the same on the children, or elements of the grid, you can make it so they all stretch to fill in that ugly white space, thus achieving another grid layout without being... unelegant?

---

Grid: The Javascript way
Another way to achieve a grid layout in this case is obviously using JavaScript to make it so they all have the same height as the highest element in the grid. The faster way would be using a jQuery plugin, which also lets you give them the same size by row only if needed, which seems fitting in your case. You already have to use jQuery because of Bootstrap anyway.

---

Masonry: The Javascript way
The non-grid system you specified with differing dimensions is called a Masonry Layout. There's a useful library for that as well, although I don't think it'd be worth if you only need to use such a layout in that area only. It also makes your markup quite dirty, and I don't know whether it fares well with Bootstrap.

---

Masonry: The Boostrap way
I'm not sure as I haven't tried it, but you could try organizing content this way:

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

It might not be an optimal solution in case your tables need to be in a precise order, as well.

Answer 3

All the columns in one container > row?

<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 class="col-xs-12 col-sm-4 col-md-4">
    <!--table 6-->
</div
</div>

Answer 4

You could use

<div class="clearfix visible-xs-block"></div>

For the various sizes at certain positions while keeping it flexible for different layouts.

<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 class="col-xs-12 col-sm-4 col-md-4">
        <!--table 3-->
    </div>
    <div class="clearfix visible-sm-block visible-md-block"></div>
    ...
</div>