请问column-count瀑布流如何实现左右顺序？

Question

HTML：

<div class="wrap">
        <div class="item" style="height: 200px;">11</div>
        <div class="item" style="height: 100px;">22</div>
        <div class="item" style="height: 150px;">33</div>
        <div class="item" style="height: 70px;">44</div>
    </div>

CSS：

<style>
        .wrap{
            column-count: 2;
        }
        .item{
            background-color: #ccc;
            margin-bottom: 10px;
            page-break-inside: avoid;
        }
    </style>

效果：

目前的效果是左1，左2，右3，右4,

请问怎么才能改变所显示的顺序，变成左1，右2，左3，右4 这种顺序啊？

Answer 1

column-count 的初衷是用来给大段文本分列的，报纸那种。

你这种明显用 flex 布局更好啊，order 还可以自己定

Answer 2

写个js方法来重置下吧
改为1,3,5,7,2,4,6,8这样就行了

resetWatherItem() {
    var items = $('.waterfall .item')
    var temp = [];
    var temp1 = []
    for (var i = 0; i < items.length; i++) {
        i % 2 == 0 ? temp.push(items[i]) : temp1.push(items[i])
    }
    $('.waterfall').empty().append(temp.concat(temp1))
},