Change the direction flow of CSS columns

Question

So I have CSS like this:

#blogPosts{     -moz-column-count: 3;     -moz-column-gap: 10px;     -webkit-column-count: 3;     -webkit-column-gap: 10px;     column-count: 3;     column-gap: 10px;     width: 100%;  } 

and this creates 3 columns perfectly but when I gain another row the order seems to come out vertically like:

1,3,5 2,4,6 

Instead of what I am wanting as:

1,2,3 4,5,6 

---

Important!

Another important attribute I need, is that there must be a set margin between every post vertically. So for example if you look at the table above if 2 is longer than 1, the top of 4 will start y bellow 1 rather than: the height of 2 + y.

---

The HTML is like this:

<div id="blogPosts">     <div class="blog">Content</div>     <div class="blog">Content</div>     ... </div> 

What can I do to fix this?

---

I am happy for any solutions, even one that includes javascript/jquery

---

This is the kind of thing I am after

Answer 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/