Flex 的 order 属性可在不改 HTML 结构前提下调整子项视觉顺序，但需父容器设 display: flex/inline-flex，且仅对直接子元素生效；数值越小越靠前，默认为 0；响应式中可用媒体查询动态调整；但不影响逻辑顺序、焦点流与 SEO。
Flex 的 order 属性能让你在不改 HTML 结构的前提下，自由调整子项的视觉排列顺序。但它不是“万能重排开关”，用对了很轻巧，用错了完全没反应——关键在前提和细节。
必须先让父容器进入 Flex 上下文
order 只对 display: flex 或 display: inline-flex 的直接子元素生效。这是硬性前提，90% 的“设了没反应”都卡在这一步。
- 检查父容器是否写了
display: flex（不是写在子元素上） - 避免同时给子元素加
float、position: absolute或display: contents，这些会让元素脱离 Flex 格式化上下文 -
display: none的元素不参与布局，order 自然无效
数值逻辑：越小越靠前，负数合法
order 默认值是 0，数值按升序排列：-2 < -1 < 0 < 1 < 2……相同值则退回 HTML 原顺序。
- 想把某个元素提至最前？设
order: -1或order: -2即可 - 想把它推到最后？设
order: 1或order: 2，其余保持默认 0 - 不需连续编号，跳着写（比如 10、100）也行，但推荐用小整数（-1/0/1/2），方便后续增删和维护
响应式场景：用媒体查询动态切换顺序
同一组元素，在桌面端和移动端展示逻辑不同，是 order 最典型的用法。
立即学习“前端免费学习笔记（深入）”；
- 基础样式统一设
order: 0，保持语义清晰 - 在
@media (max-width: 768px)中覆盖特定元素的 order，比如：.sidebar { order: 2; }（让它排到主内容之后） - 注意：即使
flex-direction从 row 改为 column，order 依然控制主轴上的顺序，无需额外调整
重要提醒：视觉顺序 ≠ 逻辑顺序
order 只改变渲染位置，不影响 DOM 结构、Tab 键焦点流、屏幕阅读器读取顺序，也不影响 SEO 抓取源码顺序。
- 如果把“跳转到正文”链接用
order: -1提前显示，键盘用户 Tab 时仍会先经过导航栏 - 关键操作区域（如表单、主标题
<h1>）建议保持 HTML 源序合理，别靠 order “强行前置” - 真正需要逻辑顺序变更时，应优先重构 HTML，或配合
tabindex="-1"+ JS 焦点管理
