flex-direction: column 时 order 才真正可控；因 order 仅改变视觉顺序而不影响尺寸计算，单列布局下才稳定生效，且需避免与 float、absolute 等混用，配合语义 HTML 和可访问性优化。
flex-direction: column 时 order 才真正可控
很多人试过在 flex-direction: row 下用 order 把图片从左挪到右，结果发现文字被挤出视口、换行错乱——因为 order 只改变视觉顺序，不改变文档流中元素的尺寸计算基准。只有当图文堆叠为单列（flex-direction: column）时，order 才能稳定生效，且不会干扰 flex-wrap 或 gap 的行为。
实操建议：
- 桌面端设
flex-direction: row，移动端媒体查询里切为column，再统一用order控制位置 - 避免对同一组元素混用
order和float或position: absolute，后者会直接让order失效 -
order值建议用 0/1/2 这类小整数，别写 -999 或 999，某些旧版 Safari 对极端值解析不稳定
图片在上 / 文字在上？用 order 替代 DOM 重排
SEO 和可访问性要求图片在 HTML 中写在文字前面（语义优先），但设计稿常要求小屏时文字在上、图片在下。硬改 HTML 顺序会破坏结构逻辑，而 order 是唯一不碰 DOM 就能翻转视觉顺序的纯 CSS 方案。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 写了
order: 2却没生效 → 父容器没设display: flex或子项被display: contents干扰 - 文字区域突然变窄 → 图片元素用了
flex: 1，导致它和文字争宽度；应改为flex: 0 0 auto - 小屏下图片被拉伸 → 忘了给
img加max-width: 100%和height: auto
最小可用示例：
.article-card {
display: flex;
flex-direction: column;
}
.article-img { order: 2; flex: 0 0 auto; }
.article-text { order: 1; flex: 1; }
@media (min-width: 768px) {
.article-card { flex-direction: row; }
.article-img { order: 0; }
.article-text { order: 1; }
}
order 和 flex-wrap: wrap 一起用要小心间隙错位
当图文模块不止一组（比如卡片列表），又启用了 flex-wrap: wrap，order 会按“每行独立排序”处理，而不是全局排序。这意味着第二行的第一个元素可能 order: 1，但它实际出现在第一行最后一个元素之后——视觉上断层明显。
解决思路不是禁用 wrap，而是换策略：
- 用
grid做外层布局（控制行列），每张卡片内部再用flex + order处理图文顺序 - 若坚持全 Flex，就把每张卡片包一层
div，让order作用于卡片级，而非图文级 - 绝对不要给
flex-wrap容器里的子项同时设width和order，Firefox 旧版本可能把宽度计算锚点错配到排序前的位置
IE11 兼容时 order 的降级方案
IE11 支持 order，但不支持 flex-direction: column 下的换行行为，会导致所有元素强行堆成一列且溢出。真要兼容，得准备 CSS fallback：
- 用
@supports (order: 1)包裹现代写法，IE11 自动跳过 - 降级时改用
display: table-cell+vertical-align模拟并排，虽僵硬但稳定 - 更务实的做法：加 class 如
js-flex-support，JS 检测flex支持后才启用order相关样式
最易被忽略的一点：order 不影响屏幕阅读器读取顺序，它只改视觉流。如果图文语义强依赖位置（比如“图A说明文字B”），仅靠 order 翻转可能降低可访问性，需配合 aria-labelledby 或隐式 role="figure" 补足。
