order生效需满足三前提：父容器为flex、目标为直接子元素、移动端显式重置；失效主因是布局前提缺失或强定位属性覆盖；且order不改变Tab顺序与语义流，需同步处理可访问性。
直接用 order 配合媒体查询就能做到，但必须满足三个硬性前提：父容器是 display: flex、目标元素是直接子元素、移动端断点里显式重置值。
为什么写了 order 却没反应？先查这三处
最常见的“没生效”不是语法错，而是布局前提崩了：
- 父容器漏写了
display: flex或display: inline-flex——order在普通块级或 Grid 容器里完全无效 - 目标元素嵌套了一层 wrapper
<div><aside class="sidebar">...</aside></div>——order只认直接子元素，中间多一层就失效 - 同时用了
grid-column或flex-basis等强定位属性 —— 它们会覆盖order的排序逻辑，视觉上“不听使唤”
移动端重排的典型写法（比如主内容前置）
HTML 保持语义优先顺序：<header></header>、<main></main>、<aside></aside>，但小屏下要让 <main></main> 显示在最上面：
.container {
display: flex;
flex-direction: column;
}
main { order: -1; }
aside { order: 1; }
<p>@media (max-width: 768px) {
/<em> 小屏下重置：main 提到最前，aside 推到最后 </em>/
main { order: -1; }
header { order: 0; }
aside { order: 1; }
}
注意：header 显式设 order: 0 很关键——否则它会继承默认 0，和没写 order 的其他元素混在一起，顺序不可控。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的可访问性断层
order 只改眼睛看到的，不改键盘 Tab 顺序、屏幕阅读器朗读顺序、SEO 索引顺序。比如你把操作按钮用 order: -1 提到标题前面，用户按 Tab 键时焦点仍先落在标题上，再跳到按钮，体验割裂。
如果交互流依赖视觉顺序（比如“先看说明，再点按钮”），仅靠 order 不够，得同步加 tabindex 调整焦点流，或重构 HTML。
真正难的不是怎么写 order，而是判断哪些地方“不能只靠 order”。语义错位越深，后期补无障碍、做 SSR、接自动化测试时踩的坑就越隐蔽。
