用 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 顺序与视觉意图一致更稳妥