order属性专为不改变DOM顺序仅调整视觉排列而设计，按值从小到大排序，相同值按HTML原序；默认值为0，只接受整数，不影响语义顺序与可访问性。
flex 里想调换子元素显示顺序，但不想动 HTML 结构
直接用 order 属性。它专为这个场景设计：不改变 DOM 顺序，只调整视觉排列。浏览器按 order 值从小到大渲染子项，相同值则按 HTML 中的原始顺序。
为什么不能靠 flex-direction: row-reverse 或 column-reverse
这两个属性是整体翻转，无法精细控制单个元素位置。比如你只想把第三个盒子提到最前，其余保持原序，row-reverse 会把所有子项倒过来，不符合需求。
order 的默认值和常见误用点
每个 flex 子项的 order 默认是 0。注意：order 只接受整数（不支持小数或单位），且不是 z-index 那种层叠概念，它纯粹影响主轴上的排列顺序。
- 别写成
order: 1px或order: "1"—— 无效，会被忽略 - 别指望
order改变语义顺序或可访问性顺序（屏幕阅读器仍按 HTML 结构读） - 避免大量使用非零
order值，比如-999、999，容易后期维护混乱
.box-1 { order: 2; }
.box-2 { order: 0; }
.box-3 { order: -1; }
/* 渲染顺序变为：box-3 → box-2 → box-1 */响应式中动态调整 order 要小心什么
在媒体查询里改 order 是常见做法，但要注意：如果多个断点设置了不同 order，且没有明确覆盖逻辑，容易出现意料外的叠加行为。
立即学习“前端免费学习笔记（深入）”；
- 确保关键断点中显式重置不需要的
order，比如从order: 1切回默认，写order: 0，别留空 - 不要依赖父容器的
order（flex 容器自身没有order属性，只对子项生效） - 和
flex-grow/flex-shrink混用时，order不影响尺寸分配，只管位置
真正要改的是视觉流，而不是结构流——这点一旦混淆，后续加动画、做 SSR 或对接无障碍工具时就会出问题。
