order在媒体查询中没生效，是因为父容器未设置display: flex或grid；Flex/Grid的order属性仅对直接子项有效，且需显式声明order值，否则默认为0导致排序异常。
为什么 order 在媒体查询里没生效
直接在媒体查询中改 order 却发现模块顺序没变，大概率是父容器没设 display: flex 或 display: grid。Flex/Grid 的 order 属性只对 Flex 项目或 Grid 项起作用，普通块级元素加了也没用。
实操建议：
- 确认父容器有
display: flex（或grid），且子元素是直接子节点 - 检查是否被其他 CSS 规则覆盖，比如更具体的 selector 或
!important干扰 - 移动端优先写法下，基础样式先设默认
order，再在大屏媒体查询里覆盖
用 @media + order 调整 Flex 子项顺序
这是最常用也最可控的方式。关键点在于：所有需要重排的子元素必须显式声明 order 值，否则浏览器按文档流顺序补默认值 0，容易导致意外排序。
常见场景：PC 端侧边栏在右，移动端移到主内容下方
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-direction: column;
}
<p>.sidebar { order: 2; }
.main { order: 1; }</p><p>@media (min-width: 768px) {
.container {
flex-direction: row;
}
.sidebar { order: 2; } /<em> PC：右侧 </em>/
.main { order: 1; } /<em> PC：左侧 </em>/
}注意：flex-direction: row 下，order 数值小的靠左；column 下数值小的靠上 —— 顺序始终按 order 升序排列。
Grid 布局中用 grid-row / grid-column 替代 order
Flex 的 order 只控制一维顺序，Grid 更适合二维重排。比如想让某个模块在小屏时占满一行、大屏时嵌入中间某格，用 grid-row 和 grid-column 更精准。
实操要点：
- 父容器必须设
display: grid并定义grid-template-areas或轨道 - 子元素用
grid-area指定区域名，或用grid-row/grid-column定位 - 媒体查询中可完全改变布局结构，不只是“顺序”
.container {
display: grid;
grid-template-areas:
"header"
"main"
"sidebar";
}
<p>.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }</p><p>@media (min-width: 1024px) {
.container {
grid-template-areas:
"header header"
"main sidebar";
}
}避免用 float 或 position: absolute 伪装响应式顺序
这两种方式看似能“挪位置”，但会脱离文档流，导致高度塌陷、遮挡、可访问性丢失、打印样式错乱等问题。尤其 absolute 配合媒体查询调整 top/left，后续维护成本高，且无法响应屏幕旋转（如 iPad 横竖切换）。
真正可靠的响应式顺序控制，只有两类机制：
- Flex/Grid 的
order、grid-area、flex-direction - HTML 结构本身按语义顺序书写（比如把重要内容放 DOM 前面），再用视觉隐藏（
clip-path或visually-hidden类）辅助辅助技术
复杂点往往不在怎么写媒体查询，而在于是否提前规划了语义 HTML 结构和基础布局模型 —— 没有这个前提，光调 order 值只会越调越乱。
