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/