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