仅使用CSS切换LI元素的顺序

我需要更新现有的CSS页面已经到位。我不允许触摸现有的HTML。我唯一的选择是创建另一个CSS/CSS3代码来覆盖现有代码。没有JS。没有JQuery

下面是一个现有HTML的示例。我的目标输出是创建一个CSS/CSS3代码覆盖以反转位置，使“第二个”类成为订单列表中的第一个类

我开始在谷歌上搜索，但找不到任何好的资源。所以我只是认为可能有一个CSS3代码可以做到这一点，就像我在下面想象的CSS代码一样：

HTML:

如有任何建议，将不胜感激

---

在此处拉小提琴->

您可以创建子元素

li

元素，然后使用更改元素的视觉顺序

在这种情况下，您可以给第二个元素一个

顺序
值
-1
，以便它出现在第一个元素上



#主列表{
显示器：flex；
弯曲方向：立柱；
}
.第二{
顺序：-1；
}

我是第一
我是第二名
我是第三名
乔希的答案非常完美！我刚才使用的另一个注意事项是：对于移动设备（如iphone）和其他浏览器的兼容性，我添加了以下CSS代码，以使其更加兼容

#mainList {
    display: -webkit-box;
    display: -moz-box; 
    display: -ms-flexbox;
    display: -webkit-flex; 
    display: flex;
    -webkit-flex-direction: column;
    -webkit-box-orient: vertical;
    flex-direction: column !important;
}
#mainList li:nth-of-type(2) {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
}
#mainList li:nth-of-type(1) {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
}

这是我一直在寻找的完美解决方案。是的，我需要的解决方案接受CSS3。非常感谢你！投票选这个作为答案。很好的一天！
.second {
    list-position: rank(1);
}
.first {
    list-position: rank(2);
}

#mainList {
    display: -webkit-box;
    display: -moz-box; 
    display: -ms-flexbox;
    display: -webkit-flex; 
    display: flex;
    -webkit-flex-direction: column;
    -webkit-box-orient: vertical;
    flex-direction: column !important;
}
#mainList li:nth-of-type(2) {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
}
#mainList li:nth-of-type(1) {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
}