order属性用于控制flex子项的视觉排列顺序，不改变html结构；默认值为0，数值越小越靠前，相同时按源顺序排列。
在 H5 中，Flex 布局通过 order 属性控制子元素的显示顺序，它不改变 HTML 结构，只影响视觉排列。
order 属性的基本用法
order 是作用于 子元素（flex item） 的 CSS 属性，默认值为 0。数值越小，越靠前；数值越大，越靠后。负数也合法，比如 -1 会排在 0 前面。
- 父容器必须已设置
display: flex，否则 order 不生效 - order 只影响同一层级的 flex 子项，不影响嵌套子项的内部顺序
- 多个子项 order 值相同时，按 HTML 源顺序排列
实际调整顺序的常见写法
假设三个子元素默认从左到右是 A → B → C，想让 C 显示在最前面：
.item-a { order: 2; }
.item-b { order: 1; }
.item-c { order: 0; }
效果就是：C → B → A（视觉上），而 DOM 顺序仍是 A-B-C。
- 可混合使用正数、零、负数，例如：
order: -1、order: 0、order: 5 - 适合做响应式切换：小屏时把操作按钮提到最前，大屏时还原默认顺序
- 注意不要过度依赖 order，语义化结构和可访问性仍应以 HTML 顺序为准
与 flex-direction 的配合关系
order 始终基于当前主轴方向生效。例如：
- 当
flex-direction: row（默认），order 控制从左到右的顺序 - 当
flex-direction: column，order 控制从上到下的顺序 - 若同时设置
flex-direction: row-reverse，order 依然按数值升序排列，但整体布局方向反转，需结合测试确认最终视觉效果
注意事项
order 不是“重排 DOM”，它只是渲染层的视觉重排序：
- 屏幕阅读器通常仍按源顺序读取，对无障碍有影响
- 不能替代语义化结构调整，重要内容建议保持合理 HTML 顺序
- 调试时可在浏览器开发者工具中查看 computed 样式里的 order 值是否生效
