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

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 这种顺序啊？