要实现双列有序列表，需禁用ol默认序号，用CSS计数器+li::before重绘，并采用display: grid布局；移动端应通过媒体查询切换为flex-direction: column以确保适配。
ol 默认是垂直堆叠的，没法直接“并排”
HTML 的 <ol> 语义是**有序序列**，浏览器默认把它当单列流式内容渲染。你写 column-count: 2 或 display: flex 到 <ol> 上，看似能分栏或横排，但会立刻暴露两个问题：序号错乱、换行对齐崩溃。这不是 CSS 写得不对，而是 <ol> 的计数器和布局模型不兼容这些方式——尤其 column-count 会把一个 <li> 拆到两列里，序号只在第一列显示，第二列空白。
真要双列，得放弃 ol 的原生序号渲染逻辑
如果你只要视觉上“看起来像两列有序列表”，且接受手动控制编号，最稳路径是：关掉 <ol> 的默认序号，用 CSS 计数器 + li::before 重绘，并配合 display: grid 布局。关键点：
ol { list-style: none; padding-left: 0; counter-reset: item; }li { counter-increment: item; }li::before { content: counter(item) ". "; }ol { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
注意：别用 flex-wrap 做双列，它会让序号和文字基线错位（尤其字体变化时）；也别给 li 设 width: 50%，它不响应内容长度，容易撑破或留空隙。
移动端适配必须加 flex-direction: column 而不是改列数
用 grid-template-columns: 1fr 1fr 在小屏下不会自动回退为单列——它只会把两列压得极窄甚至文字换行溢出。正确做法是媒体查询中切换布局模型：
立即学习“前端免费学习笔记（深入）”；
ol {
display: grid;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 768px) {
ol {
display: flex;
flex-direction: column;
}
}
这里不用 grid-template-columns: 1fr，因为 1fr 在单列 grid 里仍保留 grid 容器行为，而 flex-direction: column 更轻量、更可控，且避免 Safari 对小屏 grid 的渲染抖动。另外，counter() 在 flex 下完全正常，序号不会断。
最容易被忽略的是字体度量对序号垂直位置的影响
哪怕你所有 CSS 都写对了，换一个字体（比如从系统 San Francisco 换成自定义 Inter），li::before 里的序号就可能上浮或下沉几个像素，导致和文字不对齐。这不是 bug，是字体内部 ascender/descender 度量差异造成的。解决方法只有两个：
- 显式设
line-height: 1.2（试 1.1~1.3 之间的小数） - 或用
vertical-align: middle+padding-top微调，但仅限单行文本场景
别指望 list-style-position: inside 或 text-indent 搞定——它们在 grid/flex 下失效概率极高，且无法跨字体保持一致。
