order仅影响视觉顺序，不改变DOM顺序、可访问性及SEO；显式定位（grid-row/column）优先于order；flex与grid中行为基本一致但上下文约束不同；移动端慎用order避免焦点断裂。
order 属性只影响视觉顺序，不影响 DOM 顺序和可访问性
给 Grid 子项设置 order 会改变它在网格容器中的渲染位置，但不会改变它在 HTML 中的实际顺序。屏幕阅读器、Tab 键导航、SEO 解析仍按原始 DOM 流进行。如果你依赖键盘操作或无障碍支持，不能只靠 order 来“重排逻辑结构”。
-
order默认值是0，数值越小越靠前（负数也合法） - 多个元素
order相同时，按 HTML 中的源顺序排列 - 仅对直接子元素生效，不作用于嵌套子元素
- 不要用
order替代语义化结构调整——比如把页脚内容用order: -1提到顶部，不如调整 HTML 顺序 + 合理使用 ARIA 标识
Grid 中 order 和 grid-row / grid-column 冲突时谁优先？
显式定位（grid-row 或 grid-column）优先级高于 order。只要设置了行/列起止线，order 就完全失效。
- 例如：
grid-row: 2;的元素，无论order是 -10 还是 100，都会固定在第 2 行 -
order只在“自动放置（auto-placement）”场景下起作用：即没写grid-row/grid-column，且容器启用了grid-auto-flow（默认为row） - 若同时设了
order和grid-area，同样以grid-area为准
order 在 flex 和 grid 中行为一致吗？
基本一致：都按整数值升序排列，默认为 0，相同值按源顺序。但关键差异在于上下文约束：
- Flex 中
order影响整个主轴流，哪怕元素被flex-wrap换行，仍按全局 order 排 - Grid 中
order仅参与自动分配阶段；一旦某元素被显式定位，或触发了grid-auto-flow: column，其行为就可能偏离直觉 - Grid 容器若设置了
grid-template-areas，order对命名区域内的元素无效——区域位置由模板定义，不是靠 order 决定的
移动端适配中滥用 order 导致的典型问题
有人用 @media 切换不同 order 值来实现“桌面端侧边栏在右、移动端移到顶部”的效果，这容易引发两个实际问题：
