Change the direction flow of CSS columns
Solution 1:
The closest thing would be to use flexbox
#blogPosts {
display: flex;
align-items: left;
justify-content: left;
flex-direction: row;
flex-wrap: wrap;
flex-flow: row wrap;
align-content: flex-end;
}
http://jsfiddle.net/o59gc4hw/2/
Solution 2:
Well on the first sight I thought you should look at the Masonry library. When you then search for masonry, you possibly also will find masonry flexible box and masonry columns.
Problem with both the columns and flexible box solutions is that the first items are in the first column.
I found one possible solution, which only works when your number of item is fixed.
For nine items in three columns:
#blogPosts {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.blog {
color: white;
width: 33%;
}
.blog:nth-child(3n+1) {
-webkit-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
}
.blog:nth-child(3n+2) {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
.blog:nth-child(3n+3) {
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
}
.blog:nth-child(n+7):nth-child(-n+9) {
page-break-after: always;
-webkit-break-after: always;
-moz-break-after: always;
break-after: always;
}<div id="blogPosts">
<div class="blog" style="background-color:blue; height:50px;">1</div>
<div class="blog" style="background-color:red; height:75px;">2</div>
<div class="blog" style="background-color:green; height:100px;">3</div>
<div class="blog" style="background-color:black; height:30px;">4</div>
<div class="blog" style="background-color:yellow; height:50px;">5</div>
<div class="blog" style="background-color:purple; height:80px;">6</div>
<div class="blog" style="background-color:pink; height:150px;">7</div>
<div class="blog" style="background-color:orange; height:15px;">8</div>
<div class="blog" style="background-color:gold; height:50px;">9</div>
</div>The above use the flexible box, with the order property and nth child selectors. And finally also see: How to specify an element after which to wrap in css flexbox?