用order属性配合媒体查询可切换视觉顺序，但前提是父容器设为display: flex或grid；失效主因是父容器未设flex、目标非直接子元素、或子元素用了absolute/float。
直接用 order 配合媒体查询就能实现，但前提是父容器必须是 display: flex 或 display: grid，否则样式完全不生效。
为什么在媒体查询里设了 order 却没反应
绝大多数“写了没变化”的情况，卡在三个硬性前提上：
- 父容器没加
display: flex（或inline-flex/grid）——order只对 Flex/Grid 项目起作用，别的布局下它就是被忽略的废属性 - 目标元素不是父容器的**直接子元素**，比如中间嵌了一层
<div>，那order对孙子元素无效 - 子元素用了
position: absolute或float—— 这些会让元素脱离 flex 流，order失去作用对象
order 值怎么设才不容易翻车
别靠猜，也别堆大数。实际项目中最稳的是小整数区间：
- 主内容区域保持默认
order: 0（不写也行） - 想前置的（如移动端导航、CTA 按钮），统一设
order: -1 - 次要内容（如广告、边栏），设
order: 1或order: 2 - 避免用
order: 999或order: -100—— 后续加新元素时极易冲突，维护成本陡增 - 相同
order值的元素，严格按 HTML 源码顺序排列，这点常被忽略
order 和 flex-direction 搭配时的视觉陷阱
order 总是沿着主轴排序，但“靠前”不等于“靠左”或“靠顶”——它取决于 flex-direction：
立即学习“前端免费学习笔记（深入）”；
-
flex-direction: row→order: -1出现在最左边 -
flex-direction: row-reverse→order: -1反而出现在最右边（因为主轴反向了） -
flex-direction: column→order: -1出现在最上方
别假设“负数一定顶上”，先看主轴方向，再推导视觉结果。
真正容易被忽略的点
很多人调完 order 就上线，结果用户反馈键盘操作错乱、屏幕阅读器读串了——问题往往出在这几处：
- 屏幕阅读器和键盘 Tab 仍按原始 HTML 顺序走，视觉错位会让辅助技术用户完全迷失逻辑流
- JavaScript 里用
el.nextSibling或parentNode.children拿到的仍是 DOM 顺序，不是视觉顺序 - SEO 抓取的是源码，不是渲染后结果；把关键内容靠
order“拽”到前面，搜索引擎并不买账 - 媒体查询里动态切
order很方便，但必须同步处理tabindex、aria-hidden等可访问性补丁，否则就是埋雷
