用 CSS flex 的 order 属性可灵活调整模块视觉顺序而不改 HTML，需父容器设 display: flex，order 默认 0、值越小越靠前，支持负数和媒体查询动态控制，但不改变 DOM 顺序、可访问性及 SEO。
页面模块顺序调整不方便，直接改 HTML 结构既容易出错又影响语义，用 CSS 的 flex 布局配合 order 属性就能灵活控制视觉顺序，无需改动 DOM。
确保父容器是 flex 布局
只有设为 display: flex 或 display: inline-flex 的容器，其子元素才能响应 order 属性。注意：order 只影响视觉排列，不影响源码顺序和可访问性流（如屏幕阅读器仍按 HTML 顺序读取）。
- 给模块外层容器加
display: flex - 推荐同时设置
flex-direction: column（垂直排列）或保持默认row（水平排列） - 避免在已用 Grid 或浮动的布局中混用，易引发冲突
用 order 数值控制显示优先级
order 默认值为 0，数值越小越靠前，支持负数。它不决定“第几个”，而是定义相对层级——相同值的元素按 HTML 顺序排列。
- 想让「侧边栏」显示在「主内容」前面？给侧边栏设
order: -1，主内容保持order: 0 - 多个模块需重排时，用连续整数更清晰，例如：
order: 1、order: 2、order: 3 - 慎用过大绝对值（如 999），不利于后期维护和协作
适配响应式场景
不同屏幕尺寸下模块优先级常不同。可结合媒体查询动态调整 order，实现「移动优先」的视觉重组。
- 手机端希望导航最后出现？
@media (max-width: 768px) { .nav { order: 99; } } -
平板横屏时恢复默认顺序？可统一重置：
order: 0 - 避免在每个断点里重复写所有模块的 order，用 CSS 自定义属性（
--order）提升可维护性
注意可访问性与 SEO 影响
order 只改变视觉渲染，不改变 DOM 顺序、焦点流、屏幕阅读器朗读顺序，也不影响搜索引擎对内容权重的判断。若逻辑顺序本身不合理（比如正文在标题前），应优先修正 HTML 结构。
- 关键操作按钮、表单控件等交互元素，不要仅靠
order移到顶部而忽略 tab 键顺序 - 测试时用键盘 Tab 导航，确认焦点路径是否符合用户预期
- 对语义要求高的区域（如文章主体、导航菜单），保持 HTML 顺序与视觉意图一致更稳妥
