HTML CSS列左右交替显示内容

请参阅附件中的图片以查看我当前拥有的内容

我已经通过css

column count:2的
UL
实现了这一点和lis具有不同的高度和颜色。每个
li
的内容都是一个数字，它们在HTML中按顺序排列

正如您在所附的布局中所看到的，所有内容都从左侧开始，然后从右侧开始创建一个新列。我想让布局更像这样：

Left:    Right:
1        2
3        4
5        6

etc etc

目标：
它们的布局与图像中的相同，但顺序不同。

我怎样才能做到这一点

更新1；
增加了相关代码

<style>
#items {
     -webkit-column-count: 2;
     -moz-column-count: 2;
     column-count: 2;
}
.item p {
    padding: 20px;
    color: white;
    font-size: 22px;
}
.item-1 {
    height: 120px;
    background: pink;
}
.item-2 {
    height: 180px;
    background: red;
}
.item-3 {
    height: 210px;
    background: gray;
}
.item-4 {
    height: 160px;
    background: green;
}
.item-5 {
    height: 110px;
    background: yellow;
}
.item-6 {
    height: 240px;
    background: maroon;
}
.item-7 {
    height: 120px;
    background: blue;
}
.item-8 {
    height: 420px;
    background: lime;
}
.item-9 {
    height: 300px;
    background: teal;
}
.item-10 {
    height: 190px;
    background: olive;
}</style>

<ul id="items">
    <li class="item item-1"><p>1</p></li>
    <li class="item item-2"><p>2</p></li>
    <li class="item item-3"><p>3</p></li>
    <li class="item item-4"><p>4</p></li>
    <li class="item item-5"><p>5</p></li>
    <li class="item item-6"><p>6</p></li>
    <li class="item item-7"><p>7</p></li>
    <li class="item item-8"><p>8</p></li>
    <li class="item item-9"><p>9</p></li>
    <li class="item item-10"><p>10</p></li>
</ul>


#项目{
-webkit列数：2；
-moz列数：2；
列数：2；
}
.项目p{
填充：20px；
颜色：白色；
字体大小：22px；
}
.项目-1{
高度：120px；
背景：粉红色；
}
.项目-2{
高度：180像素；
背景：红色；
}
.项目-3{
高度：210px；
背景：灰色；
}
.项目-4{
高度：160px；
背景：绿色；
}
.项目-5{
高度：110px；
背景：黄色；
}
.项目-6{
高度：240px；
背景：褐红色；
}
.项目7{
高度：120px；
背景：蓝色；
}
.项目8{
高度：420px；
背景：石灰；
}
.项目9{
高度：300px；
背景：水鸭；
}
.项目10{
高度：190px；
背景：橄榄；
}

1

2

3

4

5

6

7

8

9

10


如果您想坚持您的
ul
，可以执行以下操作。浮动
li
并设置宽度，使每一个都占据一半的空间。我应该注意的是，如果这些物品高度相等，则会出现这种情况。否则，我认为你的排名会下降到两列，一列是赔率，另一列是平局


ul，li{
保证金：0；
填充：0；
}
保险商实验室{
列表样式：无；
}
李{
浮动：左；
宽度：50%；
}
李：第n个孩子（1）{
背景色：#F5；
}
李：第n个孩子（4）{
背景色：#F5；
}

一个
两个
三
四
请发布相关代码。我已经添加了代码。