order属性仅改变视觉顺序，不改变DOM结构、Tab焦点和屏幕阅读器读取顺序；生效需满足五前提：父容器设flex/inline-flex、子元素为直接子项、无float/absolute、CSS权重足够、不在Grid中误用。
order 属性能实现不同屏幕下的元素视觉重排，但**只改眼睛看到的顺序，不改 DOM、Tab 焦点、屏幕阅读器读取顺序**——这点不确认清楚，后续可访问性测试大概率会报严重问题。
为什么写了 order 却完全没变化？
不是属性写错了，而是三个硬性前提没满足：
- 父容器没设
display: flex或display: inline-flex（漏掉inline-flex也白搭） - 目标元素不是 Flex 容器的直接子元素（中间嵌了一层
<div> 就失效） <li>子元素用了 <code>float或position: absolute——这些会让元素脱离 flex 流，order直接被忽略 - CSS 权重不够，被后面加载的样式或内联样式覆盖（用 DevTools 查
computed值是不是你设的数） - 在 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 切换 order 的典型写法
关键不是单写 order，而是配合 flex-direction 和断点逻辑：
.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()才能参与运算
order 提到了表单最前面，但键盘用户还是得 tab 到最后才触达它，那这个“重排”就只是自欺欺人。
