我有一个CSS网格，它几乎按照我想要的方式工作，但我不知道如何以特定的方式更改项目的顺序。

HTML布局为1，2，3，4，…10订单。但在较小的屏幕尺寸，我希望视觉顺序是1，2，4，3，5，6…10

理想情况下，从可访问性观点来看，我的猜测是在DOM中这样做会更好-但这超出了我目前的技能水平-这是一个针对视力正常用户的投资组合站点，所以我可以在CSS中更改网格的视觉顺序，直到我弄清楚DOM的内容。

我正在寻找CSS反馈，但我愿意听取如何更改DOM

<代码>*{框大小：border-box；保证金：0；填充：0；}身体{字体系列：Arial，Geneva，Helvetica，sans-serif；颜色：#515C62；}UL{显示：网格；网格模板列：重复（自动填充，最小最大（最大（200px，100%/3），1FR））；网格自动流动：密集；}李{背景：#CACAC7；填充：5px；高度：50px；边距：10px；list-style-type：无；颜色：白色；字体粗细：粗体；字体大小：2em；文本对齐：居中；}#功能{背景色：#FF5916；颜色：白色；格柱：1/-1；}

<代码><；身体>；<；UL>；<；Li>；1<；/Li>；<；Li>；2<；/Li>；<；Li>；3<；/Li>；<；Li ID=“ feature ”>；4（特征）<；/Li>；<；Li>；5<；/Li>；<；Li>；6<；/Li>；<；Li>；7<；/Li>；<；Li>；8<；/Li>；<；/UL>；<；/正文>；

顺晟科技：

唯一需要添加到给定代码中的是将前两个元素设置为1阶，将特征元素设置为2阶，将所有其他元素设置为3阶。

CSS网格将第三个Li放置在两个顺序为1的Li旁边，否则它将低于特色Li.

<代码>*{框大小：border-box；保证金：0；填充：0；}身体{字体系列：Arial，Geneva，Helvetica，sans-serif；颜色：#515C62；}UL{显示：网格；网格模板列：重复（自动填充，最小最大（最大（200px，100%/3），1FR））；网格自动流动：密集；}李{背景：#CACAC7；填充：5px；高度：50px；边距：10px；list-style-type：无；颜色：白色；字体粗细：粗体；字体大小：2em；文本对齐：居中；订单：3；}#功能{背景色：#FF5916；颜色：白色；格柱：1/-1；订单：2；}李：第N个孩子（1），李：第N个孩子（2）{订单：1；}

<代码><；身体>；<；UL>；<；Li>；1<；/Li>；<；Li>；2<；/Li>；<；Li>；3<；/Li>；<；Li ID=“ feature ”>；4（特征）<；/Li>；<；Li>；5<；/Li>；<；Li>；6<；/Li>；<；Li>；7<；/Li>；<；Li>；8<；/Li>；<；/UL>；<；/正文>；