应使用 flex-column-reverse 配合 flex-sm-row 实现小屏倒序、中大屏恢复默认顺序，而非 order 类或错误嵌套；容器必须显式添加 d-flex，确保 flex 类生效。
用 flex-column-reverse + 断点类控制小屏顺序
直接写 flex-column-reverse 会让所有尺寸都倒序，这不是你想要的。真正起效的做法是：让小屏（xs/sm）倒序，中大屏（≥576px）恢复默认顺序。关键在于“移动优先”原则——Bootstrap 的响应式类默认作用于最小断点，再用更大断点覆盖。
-
flex-column-reverse放在最前面，它在 xs 尺寸下生效，把子元素垂直倒序排列 - 紧接着加
flex-sm-row（或flex-md-row），从 sm（≥576px）起切换为水平布局，同时自动取消 reverse 效果（row 方向不继承 reverse） - 必须确保容器本身有
d-flex，否则所有 flex 类都不起作用 - HTML 结构按语义书写（比如文字先、图片后），靠
flex-column-reverse实现视觉上“图片在上”，而不是靠order硬调
别用 order-* 类做跨断点顺序控制
order-1、order-2 这类数值类看似灵活，但实际在响应式场景里极不可靠。它们只改变项目在主轴上的位置，不改变主轴方向本身；一旦容器从 flex-column 切到 flex-row，同一个 order-2 在竖排和横排下的视觉含义完全不同。
- 写了
order-1在 xs 下生效，但没配order-sm-0→ sm 下它还是order: 1，可能插队到错误位置 - 嵌套在
.row里的.col默认不是 flex 子项，order类对它无效 - DOM 顺序和视觉顺序分离后，可访问性（如屏幕阅读器）仍按源码读，
order可能造成语义错乱
容器必须显式加 d-flex，不能依赖 .row
.row 虽然内部是 display: flex，但它对子元素（.col）的渲染行为依赖 grid 布局逻辑，很多 flex 工具类（包括 flex-column-reverse、justify-content、align-items）只对直系 flex 子项生效。
- 错误写法：
<div class="row"><div class="col flex-column-reverse"> → <code>flex-column-reverse加在子项上，不起作用 - 正确写法：
<div class="d-flex flex-column-reverse flex-sm-row"><div class="col"> → 容器自己是 flex，子项才真正受控<li>如果还要用栅格宽度（比如 <code>col-md-6），可以和d-flex共存，但别再套一层.row，否则结构冗余且易冲突 - 加
col-md-6或w-50让两列在 md+ 等宽，避免一宽一窄 - 如果内容高度不一致，加
align-items-md-center或align-items-md-stretch统一基线或拉伸填满 - 想让某一块撑满剩余高度？给它加
flex-grow-1，但父容器必须有明确高度上下文（比如min-height: 100vh） - 调试时容易忽略：Safari 在 iPad 横屏（≈1024px）可能因 viewport 宽度判定偏差，导致 md 断点未触发，建议 DevTools 里手动输入宽度验证
大屏左右并排时注意宽度与对齐
小屏上下堆叠、大屏左右并排是常见需求，但光切方向不够，还得控制宽度分配和垂直对齐。
真正的顺序切换不是靠“挪元素”，而是靠“换容器方向”。flex-column-reverse 和 flex-sm-row 的组合之所以稳，是因为它不碰 DOM 结构，只改渲染流，既保持语义，又规避了 order 类在断点切换时的不确定性。
