Column layout indexed by rows

Question

I have the design as below:

There are 9 fields, eg. paragraphs, with the same width and unknown height (I can't simply float them).

I tried multicolumn layout, but needed to swap to elements order to 1-4-7-2-5-8-3-6-9.

'Working' HTML is ('working' in quotes, because items aren't in correct order)

<style>
    div {
        -webkit-columns: 3;
           -moz-columns: 3;
                columns: 3;

        -webkit-column-gap: 2px;
           -moz-column-gap: 2px;
                column-gap: 2px;
    }

    p {display: inline-block; width: 200px; margin: 1px}
</style>
<div>
    <p style="background: red; height: 100px">1</p>
    <p style="background: blue; height: 120px">4</p>
    <p style="background: brown; height: 100px">7</p>
    <p style="background: blue; height: 140px">2</p>
    <p style="background: red; height: 80px">5</p>
    <p style="background: yellow; height: 90px">8</p>
    <p style="background: green; height: 90px">3</p>
    <p style="background: brown; height: 140px">6</p>
    <p style="background: pink; height: 120px">9</p>
</div>

https://jsfiddle.net/ey1obeyn/2/

The ideal (and the only one correct) HTML is:

<div>
    <p style="background: red; height: 100px">1</p>
    <p style="background: blue; height: 140px">2</p>
    <p style="background: green; height: 90px">3</p>
    <p style="background: blue; height: 120px">4</p>
    <p style="background: red; height: 80px">5</p>
    <p style="background: brown; height: 140px">6</p>
    <p style="background: brown; height: 100px">7</p>
    <p style="background: yellow; height: 90px">8</p>
    <p style="background: pink; height: 120px">9</p>
</div>

But the result is https://jsfiddle.net/ey1obeyn/1/.

Is there any CSS solution? Without calculating size by JavaScript, really looking for CSS.
Thanks.