CSS: Set divs horizontally in 2 rows

Question

Lets say I have

<div class="cont">
    <div class="single">1</div>
    <div class="single">2</div>
    <div class="single">3</div>
    <div class="single">4</div>
    <div class="single">5</div>
    <div class="single">6</div>
    <div class="single">7</div>   
</div>

What I want to have is to plase the .single divs in 2 rows like bricks horizontaly from left to right this simple way: 1st div will be in left top corner, 2nd will be placed below 1st, 3rd will be placed next to 1st, 4th will be placed below 3rd and so on like:

1 3 5 7 9
2 4 6 8

All the divs has the same size.

I've tried with masonry.js and its working like a charm, but its way to complex solution for so simple task (simply solution is important).

fiddle playground

Solution

There is a CSS property that does exactly that

http://tinker.io/8ff59

.cont {
    -webkit-columns: 5em;
    -moz-columns: 5em;
    columns: 5em; /* desired width of column */
}

http://caniuse.com/#feat=multicolumn

Comments

[OPOPO]

It will propably work, but it changes structure of DOM and it may get tricky when goes about sorting etc. I was thinking about some nth css elements, but I'm not sure if its possible

[jancha]

do you need only two rows or more?

[OPOPO]

lets say 2, I'm not sure 100%, but we can assume that.

[Amitd]

it works in IE 10.. set a width to the container div like 400 px etc.