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

Question

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

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

这是它在sm屏幕上的显示方式：

我正在使用docs

中描述的clearfix技巧

问题：如何将其保存在2行3列中，但尽可能将列拉到顶部？ 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>

Answer 1

通常你需要JS这样的东西 - 比如Isotope或Masonry。您可以使用CSS3，但旧版浏览器不支持它：

不要将这些框浮动，只需将其添加到容器中：

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