用 order 属性配合媒体查询可灵活调整 flex 项目视觉顺序，无需改动 HTML；需注意仅影响显示顺序，不影响 DOM 结构与可访问性流，建议保持 HTML 语义化顺序并慎用 aria-order 或 tabindex。
用 order 属性配合媒体查询，就能在不同屏幕尺寸下灵活调整 flex 项目显示顺序，无需改动 HTML 结构。
基础写法：先设默认 order，再用媒体查询覆盖
每个 flex 项目默认 order: 0。你可以给元素显式设置 order 值（整数，越小越靠前），然后在媒体查询中重新分配。
- HTML 保持语义化顺序（比如导航在 header 里，内容在 main 里）
- CSS 中先写移动端优先的 order 值（例如让主要内容优先渲染）
- 在
@media (min-width: 768px)等断点里，重设 order 实现桌面端布局切换
典型场景：主次内容顺序反转
比如移动端希望「内容」在「侧边栏」前面，桌面端希望侧边栏在左、内容在右：
.container { display: flex; }
.sidebar { order: 2; }
.content { order: 1; }
@media (min-width: 768px) {
.sidebar { order: 1; }
.content { order: 2; }
}
这样 HTML 里 .content 写在 .sidebar 前面也没关系，视觉顺序由 CSS 控制。
立即学习“前端免费学习笔记（深入）”；
注意 order 的层级和范围
order 只对同一级 flex 子项生效，且仅影响视觉顺序，不影响 DOM 结构和可访问性流（如 tab 键顺序、屏幕阅读器读取顺序）。如果需要兼顾可访问性：
- 尽量让 HTML 顺序符合逻辑主次（比如主要内容在前）
- 避免用
order把关键操作按钮或表单控件“藏”到很后面 - 必要时用
aria-order或tabindex辅助（但非标准属性，慎用）
进阶技巧：用 CSS 自定义属性简化维护
多个断点频繁改 order 时，可用自定义属性统一管理：
.card { order: var(--card-order, 0); }
.card--featured { --card-order: -1; }
@media (max-width: 600px) {
.card--featured { --card-order: 0; }
.card--secondary { --card-order: 1; }
}
这样只需改变量值，不用重复写选择器，也更易读。
