order仅改变视觉顺序，不影响dom、tab焦点及屏幕阅读器顺序；失效主因是父容器未设display:flex/inline-flex、子元素非直接子项或脱离文档流。
能，但只改眼睛看到的顺序，不改 DOM、Tab 焦点、屏幕阅读器读取顺序——这点必须先认清楚，否则后期 Accessibility 审查会翻车。
为什么写了 order 却完全没变化？
不是属性写错了，而是布局前提没立住：
- 父容器没设
display: flex或display: inline-flex（漏掉inline-flex也白搭） - 目标元素不是 Flex 容器的直接子元素（中间嵌了个
<div> 就失效） <li>子元素本身用了 <code>float或position: absolute，order 被浏览器直接忽略 - CSS 权重不够，被后面加载的样式或内联样式覆盖（比如用 DevTools 看 computed 值是
0，说明没生效） - 在 Grid 容器里误用了
order——它对网格轨道位置完全无效，grid-column才管用 - 默认全是
order: 0，想提最前就设order: -1，推最后用order: 1 - 多个元素设相同值（如都为
0），它们之间仍按 HTML 源码顺序排——这是最容易被当成“bug”的点 - 避免用
order: 999或order: -999；推荐控制在-2到2范围内 - IE11 需要
-ms-flex-order前缀，且负值会被当0处理（比如order: -1在 IE11 里等同于没写）
怎么设 order 值才不容易后期崩？
数值本身没有“标准编号”，只看相对大小。别用极端值，留出插入余地：
响应式中用 @media 切换顺序比 JS 更稳
比如 PC 端左图右文，移动端希望先文字后图片，不用 JS 操作 DOM：
.section { display: flex; }
.text { order: 0; }
.image { order: 1; }
@media (max-width: 768px) {
.section { flex-direction: column; }
.text { order: 0; }
.image { order: 1; }
}
注意两点：
- 别只改
order不改flex-direction，否则行内布局下强行调序可能溢出 - 如果用 JS 动态设置，
getComputedStyle(el).order返回的是字符串（如"2"），得先parseInt()才能参与运算
真正麻烦的从来不是怎么让元素“看起来”换位置，而是换完之后 Tab 键焦点还卡在旧顺序上——视觉和逻辑脱节，用户一按 Tab 就懵了。
