必须显式添加d-flex或带断点的d-md-flex类，否则flex-column和flex-md-row因缺少display: flex而完全失效；正确写法为d-flex flex-column d-md-flex flex-md-row，确保各断点下flex上下文连续激活。
为什么 flex-column + flex-md-row 总是不生效
因为 flex-column 和 flex-md-row 只控制 flex-direction，前提是容器已声明 display: flex。Bootstrap 的 d-flex 才提供这个声明，而它本身没有响应式变体——必须显式写 d-sm-flex、d-md-flex 等，否则在对应断点下根本不是 Flex 容器。
常见错误写法：<div class="flex-column flex-md-row"> —— 缺少任何 <code>d-*flex 类，computed 样式里压根看不到 display: flex，整个方向切换链就断了。
验证方法：打开浏览器开发者工具，检查该元素的 computed 样式中是否有 display: flex；没有，就是 d-*flex 类缺失。
小屏单列 + 大屏双列交错的最小可行写法
目标是 xs/sm 垂直堆叠、md+ 水平并排且视觉顺序交错（比如 DOM 中文字在前、图片在后，但小屏要图片在上、大屏左右并排），关键不是靠 order，而是用 flex-column-reverse + 断点覆盖。
-
d-flex flex-column-reverse d-md-flex flex-md-row：小屏激活flex-column-reverse，让后写的图片出现在视觉顶部；md 起用d-md-flex重新启用 Flex 上下文，flex-md-row覆盖 reverse 行为，恢复自然水平流 - 两子项都加
col-md-6：大屏各占半宽；小屏因父容器是flex-column，col-md-6自动退化为flex: 1，等宽自适应 - 不要嵌套
.row：在d-flex容器里再套.row是冗余结构，容易导致对齐类（如align-items-center）失效
如何避免“交错”变成“错位”
所谓“交错”，本质是 DOM 顺序与视觉顺序分离。但若处理不当，会引发高度塌陷、对齐错乱或可访问性问题。
- 别用
order-1/order-2控制跨断点顺序：它们只改主轴位置，不改主轴方向；从column切到row后，同一个order值含义完全不同 - 小屏下若内容高度差异大，
flex-column-reverse可能导致底部留白；加align-items-start防止默认拉伸 - 屏幕阅读器仍按源码顺序读取，所以 HTML 结构应保持语义合理（例如文字先写，图片后写），仅靠 CSS 视觉调整
- 如果子项内还要分栏（比如图片区再分图+说明），必须在子项内部显式加
d-flex，不能依赖父级继承
大屏双列时宽度与对齐的实际控制点
光切方向不够，宽度和垂直对齐不配好，双列会一高一矮、一左一右贴边，看着像没对齐。
- 确保外层容器有明确宽度上下文：比如包在
.container或设max-width: 1200px，否则col-md-6计算基准飘忽 - 加
align-items-md-center或align-items-md-stretch到容器上，统一两列基线或强制等高 - 避免在子项里用
height: 100%或min-height：会干扰 flex 拉伸逻辑，优先用h-100作用于子项内部卡片等容器 - 间距用
gap-md-4（而非mb-3）：gap 在 flex 容器中才可靠生效，且响应式断点明确
最容易被忽略的是：Flex 工具类不是独立开关，它们依赖容器是否真正进入 Flex 上下文。漏掉任何一个 d-*flex，那一段尺寸就退回到 block 流——尤其在嵌套结构里，父容器没开 d-flex，子项再怎么加 flex-md-wrap 都是摆设。
