flex子项顺序控制必须用order类，它直接映射css order属性，数值越小越靠前；依赖html顺序或margin/float会导致流破坏、响应式错乱；需配合d-flex使用，响应式需显式覆盖各断点，且不替代flex-direction切换。
Flex子项顺序控制必须用order类，不能靠HTML顺序或margin调整
Bootstrap 4的order类是唯一标准方式，它直接映射CSS的order属性，数值越小越靠前。靠改margin-left或float强行“视觉位移”会破坏Flex流，导致换行错乱、对齐失效，尤其在响应式断点切换时极易崩溃。
常见错误现象：order-1没生效、子项顺序和预期相反、大屏正常小屏错位。
-
order类默认从0开始，order-0是默认值（不写也等效），order-1比order-0更靠前，order-2更靠后 - 必须配合
d-flex容器使用，单独加order-*无效 - 不要混用
flex-row-reverse和order——前者翻转整行，后者微调单个子项，目标不同 - 响应式场景下，
order-sm-3只在sm及以上生效，xs尺寸仍按默认顺序；若需全断点控制，得补全order-3 order-sm-3 order-md-3
示例：让第三个子项在中屏起排第一
<div class="d-flex"> <div class="order-2">第一项</div> <div class="order-3">第二项</div> <div class="order-1 order-md-0">第三项</div> </div>
order类和justify-content-between混合使用时容易错位
当容器设了justify-content-between（两端对齐），再加order会改变“分配起点”，但不会重算间距逻辑。结果常是：顺序变了，但首尾子项被挤到边缘，中间空一大段。
根本原因：justify-content-between只管“第一个和最后一个”的位置，不管中间有几个、顺序如何。一旦order把原本第二个的元素提到最前，它就成了新的“第一个”，原第一个反而成了中间项，失去端对齐资格。
- 想保持两端对齐又调顺序，优先用
order+justify-content-start，再手动给特定子项加ms-auto（margin-left: auto）推到右侧 -
ms-auto比me-auto更安全，因为它是“向右推”，不受主轴方向影响；而me-auto在flex-column下会变成向下推，容易误判 - 避免在
flex-wrap容器里对跨行子项用order——不同行的子项order值会全局比较，可能把第二行第一个拉到第一行末尾
响应式order类必须连续覆盖，否则中间断点会回退到默认顺序
比如写order-md-2 order-lg-0，在sm尺寸下会回退到order: 0（即HTML原始顺序），而不是维持md的2。这不是bug，是Bootstrap断点类的设计逻辑：没声明的断点，就用浏览器默认值。
典型翻车场景：小屏想保持A-B-C，中屏变B-A-C，大屏变C-B-A，结果sm屏出现C-A-B。
- 正确写法是显式声明所有关键断点：
order-0 order-sm-0 order-md-2 order-lg-3 - 如果只想在某个断点生效，其他尺寸都用默认顺序，就只写那个断点类，例如仅
order-md-1，xs/sm/lg都按HTML顺序 - 验证方法：打开开发者工具，选中子项，在Computed里查
order值，不是看Classes列表——因为类名存在不代表生效
order类无法替代Flex方向切换，别试图用order模拟flex-column
有人想让水平排列的三个按钮在小屏“看起来像竖排”，于是给它们加order-1、order-2、order-3再配合flex-column——这完全多余。顺序由flex-direction决定，order只是同轴上的微调。
真正该做的是：d-flex flex-column配flex-md-row，让小屏竖、中屏横，顺序自然跟随主轴方向变化。
-
order只在同一个Flex容器、同一主轴方向内有效；跨方向（如row→column）切换时，它不参与重新排序逻辑 - 若容器同时有
flex-wrap和order，注意：折行后的子项仍按全局order值排序，不是每行独立排序 - 最易被忽略的一点：
order会影响align-self的参照系——比如align-self-end在flex-column下是“底部对齐”，但若该子项order值极大，它可能被排到最后一行，此时align-self-end对齐的是那行的底部，不是整个容器
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
