移动端li元素排序异常：能否用EVEN/ODD伪类实现正确排序？

核心原因 #

你当前的HTML是按「列优先」写的：1、4、2、5、3、6，PC端靠float:left分成两列后，左列显示1、2、3，右列显示4、5、6，看起来正常。但移动端如果只是把li宽度改成100%，元素会严格按照HTML的顺序排列，就变成了1、4、2、5、3、6，自然乱了。

关于:even/:odd伪类的使用 #

用这两个伪类能实现，但不是最优解——需要配合Flex的order属性调整元素顺序，步骤比较繁琐。更简单的方案是调整布局逻辑或HTML结构：

方案一：调整HTML结构（推荐） #

把HTML改成自然顺序，再用CSS Grid实现PC端的两列布局，移动端直接切换为单列：

修改后的HTML

<ul class="list">
    <li><span>1.</span>reason</li>
    <li><span>2.</span>reason</li>
    <li><span>3.</span>reason</li> 
    <li><span>4.</span>reason</li>
    <li><span>5.</span>reason</li>
    <li><span>6.</span>reason</li>
</ul>

调整后的CSS

ul.list{
    margin:0 0 35px 0;
    padding:0;
    list-style:none;
    /* PC端用Grid分两列，列之间留2%间距 */
    display: grid;
    grid-template-columns: 49% 49%;
    gap: 2%;
}
ul.list li{
    line-height:45px;
    margin:10px 0;
    font-size:24px;
    border:1px solid #111a23;
    padding:10px 0 10px 10px;
}
/* 移动端媒体查询，切换为单列 */
@media (max-width: 768px) {
    ul.list{
        grid-template-columns: 100%;
        gap: 0;
    }
}
ul.list li span{
    display:inline-block;
    font-size:24px;
    background:#ff9900;
    width:45px;
    height:45px;
    line-height:45px;
    text-align:center;
    margin-right:20px;
    color:#000;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
}

如果要保持你原来的列优先布局（左列1、2、3，右列4、5、6），可以给指定li设置Grid位置：

ul.list li:nth-child(4){ grid-column: 2; grid-row: 1; }
ul.list li:nth-child(5){ grid-column: 2; grid-row: 2; }
ul.list li:nth-child(6){ grid-column: 2; grid-row: 3; }

方案二：不改HTML，用伪类+Flex调整顺序 #

如果不想修改HTML结构，可以在移动端用:nth-child(odd)/:nth-child(even)配合Flex的order属性重排顺序：

@media (max-width: 768px) {
    ul.list{
        display: flex;
        flex-direction: column;
    }
    /* 奇数位置的li（1、3、5）排在前三位 */
    ul.list li:nth-child(1){ order: 1; }
    ul.list li:nth-child(3){ order: 2; }
    ul.list li:nth-child(5){ order: 3; }
    /* 偶数位置的li（2、4、6）排在后三位 */
    ul.list li:nth-child(2){ order: 4; }
    ul.list li:nth-child(4){ order: 5; }
    ul.list li:nth-child(6){ order: 6; }
    /* 重置浮动和宽度 */
    ul.list li{
        float: none;
        width: 100%;
        margin-right: 0;
    }
}

内容的提问来源于stack exchange，提问作者Dan Rais