order仅在display: flex或inline-flex容器中生效，对grid或普通块元素无效；默认值为0，数值越小越靠前；IE10+支持，IE9及以下不兼容。
flex布局中用order调整显示顺序，但只对flex子项生效
直接改HTML结构最稳妥，但动态场景下得靠CSS控制。重点不是“能不能”，而是“在哪起作用”——order只在display: flex或display: inline-flex的容器里有效，对grid或普通块元素完全没反应。
常见错误是给非flex容器里的子元素设order，结果样式写了却毫无变化。浏览器根本不解析这个属性。
-
order默认值是0，数值越小越靠前（负数也合法） - 同一层级多个子项，仅靠
order排序，不触发重排或重绘，性能开销极低 - 注意：IE10+才支持，IE9及更早版本完全忽略，别指望兼容
Grid布局用grid-area或grid-row/grid-column显式定位
Grid比Flex更擅长“跳着放”——你可以把某个元素直接扔到第三行第二列，不管它在HTML里排第几。但前提是容器必须设display: grid，且定义好网格轨道（grid-template-rows/grid-template-columns）。
容易踩的坑是只写grid-area却不声明grid-template-areas，或者漏掉grid-template-rows导致高度塌陷，元素叠在一起看不见。
立即学习“前端免费学习笔记（深入）”；
- 用
grid-area: "header";配合grid-template-areas: "header header" "main sidebar";最直观 - 纯数字定位更灵活：
grid-row: 2; grid-column: 1 / -1;表示占第二行、从第一列到最后一列 - 响应式时可配合
@media重写grid-template-areas，比JS操作DOM轻量得多
用display: contents临时抽离父容器，让子元素参与父级flex/grid排序
当需要跨多层DOM调整顺序，又不想动HTML结构时，display: contents是少数能“穿透”嵌套层级的方案。它会让父元素不生成盒子，其子元素直接成为上一级容器的子项。
但风险明显：所有继承样式会断掉，比如font-size、color不会自动传下去；而且不支持IE，Safari直到15.4才稳定支持。
- 适用场景：卡片组件内部结构固定，但设计稿要求标题在图后、描述在图前
- 不能和
position: absolute混用，因为contents本身不占位，绝对定位会失效 - 调试时用DevTools看盒模型，如果某层突然“消失”，大概率是
display: contents在起作用
媒体查询里覆盖order或grid-area是最可靠响应式顺序切换方式
别试图用JS监听resize去改class切顺序——抖动、延迟、竞态问题一堆。CSS原生媒体查询才是正解，浏览器在布局阶段就完成计算，无额外开销。
关键点在于：所有顺序相关声明必须在同一选择器权重下覆盖，否则小屏幕的order: 2可能被大屏的order: 1（来自更高优先级class）压住。
- 推荐写法：
.card__title { order: 1; } @media (max-width: 768px) { .card__title { order: 3; } } - 避免用
!important强行覆盖，后期维护成本高，且易引发意外覆盖 - 移动端优先时，基础样式写小屏顺序，
@media里只覆盖大屏逻辑，减少冗余
真正麻烦的是嵌套flex容器里的嵌套flex——order只影响直系子项，外层容器的order对内层子项无效。这时候要么扁平化结构，要么换grid。
