Bootstrap 3 grid - pull columns to the top as much as possible - css

Question

I have a <row> with 6 columns, height of each column is unknown. On small screen it should turn into 2 rows with 3 columns.
This is how it looks on md screen:
This is how it looks on sm screen:
I'm using the clearfix trick described in the docs
Question: how do I keep it in 2 rows of 3 columns but pull the columns to the top as much as possible? a4 should touch c1 and a5 should touch d2.
Full code:
<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

Normally you'd need JS for this—something like Isotope or Masonry. You can do it with CSS3, but older browsers won't support it:
Instead of floating the boxes, just add this to the container:
.row {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}