css - Bootstrap 3网格-尽可能将列拉到顶部

我有一个6列的<row>，每列的高度未知。在小屏幕上，它应该变成2行3列。

这是它在md屏幕上的外观：


这是它在sm屏幕上的外观：


我正在使用docs中描述的clearfix技巧

问题：如何将其保留在3列的2行中，但应尽可能将其拉到顶部？ a4应该触摸c1，而a5应该触摸d2。

完整代码：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="color:black;font-size: 1.5em;">
    <div class="col-md-2 col-sm-4">
        <div style="background-color: blue;">a0</div>
        <div style="background-color: white;">b0</div>
        <div style="background-color: white;">c0</div>
        <div style="background-color: white;">d0</div>
        <div style="background-color: white;">e0</div>
    </div>
    <div class="col-md-2 col-sm-4">
        <div style="background-color: blue;">a1</div>
        <div style="background-color: white;">b1</div>
        <div style="background-color: white;">c1</div>
    </div>
    <div class="col-md-2 col-sm-4">
        <div style="background-color: blue;">a2</div>
        <div style="background-color: white;">b2</div>
        <div style="background-color: white;">c2</div>
        <div style="background-color: white;">d2</div>
    </div>

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

    <div class="col-md-2 col-sm-4">
        <div style="background-color: blue;">a3</div>
        <div style="background-color: white;">b3</div>
        <div style="background-color: white;">c3</div>
        <div style="background-color: white;">d3</div>
        <div style="background-color: white;">e3</div>
    </div>
    <div class="col-md-2 col-sm-4">
        <div style="background-color: blue;">a4</div>
        <div style="background-color: white;">b4</div>
        <div style="background-color: white;">c4</div>
        <div style="background-color: white;">d4</div>
    </div>
    <div class="col-md-2 col-sm-4">
        <div style="background-color: blue;">a5</div>
        <div style="background-color: white;">b5</div>
        <div style="background-color: white;">c5</div>
        <div style="background-color: white;">d5</div>
    </div>
</div>

最佳答案

通常，您需要使用JS（例如同位素或砌体）。您可以使用CSS3来做到这一点，但是较旧的浏览器不支持它：

无需将框浮动，只需将其添加到容器中即可：

.row {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}