css - 按行索引的列布局

Question

我的设计如下：

有9个字段，例如。具有相同宽度和未知高度的段落（我不能简单地浮动它们）。

我尝试了多列布局，但需要将元素顺序交换为1-4-7-2-5-8-3-6-9.

'工作' HTML 是（引号中的'工作'，因为项目的顺序不正确）

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

理想的（也是唯一正确的）HTML 是：

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

但结果是https://jsfiddle.net/ey1obeyn/1/。

有没有 CSS 解决方案？不用 JavaScript 计算大小，真的要找 CSS。
谢谢。