order属性仅在display: flex/inline-flex容器中对直接子元素生效，按数值升序排列，受flex-direction主轴方向影响，需配合media query和flex-direction调整实现响应式布局。
order属性在flex容器里怎么生效
必须确保父容器是display: flex或display: inline-flex，否则order完全无效。它只对直接子元素起作用，嵌套一层就失效。
-
order默认值是0，数值越小越靠前，负数也合法（比如order: -1） - 排序发生在主轴方向上，和
flex-direction强相关：设成column时，order控制的是从上到下的顺序 - 不要和
float、position: absolute混用——这些会让元素脱离文档流，order就失去作用对象
用media query改order时的常见错误
最常踩的坑是断点写反了，或者没加!important导致被其他样式覆盖（尤其当组件库自带order时）。
- 别写
@media (max-width: 768px) { .item { order: 2; } }后，又在更大屏幕写order: 1却不加min-width限定——CSS层叠会把小屏规则带进大屏 - 推荐统一用
min-width向上覆盖：@media (min-width: 768px)→@media (min-width: 1024px)，避免冲突 - 如果用了CSS-in-JS或Shadow DOM，检查
order是否被封装隔离，外部media可能根本触达不到
移动端把侧边栏提到顶部的典型写法
这是order + media最实用的场景：PC端侧边栏在右，移动端要移到内容上方。
main { display: flex; flex-direction: column; }
.sidebar { order: 1; }
.content { order: 2; }
<p>@media (min-width: 768px) {
main { flex-direction: row; }
.sidebar { order: 2; }
.content { order: 1; }
}-
flex-direction必须跟着变，否则即使order调换了，主轴还是纵向，视觉顺序没变 - 别只改
order不重置flex-direction，那是白忙活 - 如果
.sidebar有固定宽高，在column下可能撑开容器，需要额外加width: 100%或max-width
order改变后布局错乱？先查这几个点
order本身不触发重排，但会影响flex项的渲染顺序，容易引发意料外的尺寸挤压或换行。
立即学习“前端免费学习笔记（深入）”；
- 检查有没有设
flex-wrap: wrap且子项总宽超容器——order改了，折行位置可能突变 - 确认所有参与排序的元素都显式写了
order，否则默认0的项会在新顺序里“插队” - Chrome DevTools里看Computed面板，确认
order值确实被应用了，而不是被all: unset或revert干掉了 - IE11不支持
order（只认-ms-flex-order），如果还要兼容，得用JS fallback或完全放弃该方案
实际用起来，最麻烦的不是写法，而是当多个断点叠加、又有动态插入元素时，order值容易互相覆盖。建议给每个关键断点加注释，比如/<em> mobile-first order, desktop overrides below </em>/，不然半年后自己都看不懂为什么侧边栏突然跑到底部去了。
