flex-column 和 flex-md-row 无效是因为缺少 d-flex 或对应断点的 d-*flex 类，容器未声明 display: flex；正确写法需连续激活上下文，如 d-flex flex-column d-md-flex flex-md-row。
为什么 flex-column + flex-md-row 有时没反应
因为 flex-column 和 flex-md-row 只控制 flex-direction，前提是容器已声明 display: flex。Bootstrap 的 d-flex 才提供这个声明，而它本身没有响应式变体——只有 d-sm-flex、d-md-flex 等才带断点。
常见错误写法：<div class="flex-column flex-md-row"> —— 缺少 <code>d-flex 或对应断点的 d-*flex，computed 样式里根本看不到 display: flex。
- 验证方法：打开开发者工具，检查该元素的 computed 样式中是否有
display: flex；没有，就说明d-*flex类缺失 -
flex-column在所有尺寸生效，但若父容器没加d-flex或d-md-flex，它只是个无效样式 - 嵌套结构里尤其危险：父容器没开
d-flex，子项再怎么加flex-md-wrap都是摆设
小屏竖排、大屏横排的最小可行写法
目标是 xs 竖排、md 起横排，且中间不断层。关键在于断点连续覆盖 + 类顺序正确。
正确写法：<div class="d-flex flex-column d-md-flex flex-md-row">
<ul>
<li>
<code>d-flex 启用 xs 尺寸的 Flex 布局，flex-column 设为纵向
d-md-flex 在 ≥768px 时再次启用 Flex（覆盖掉可能的非 Flex 回退），flex-md-row 覆盖 flex-column，切为主轴水平d-md-flex：否则在 md 屏下，容器可能回退到 block 流，flex-md-row 失效flex-md-row 必须写在 flex-column 后面，否则会被前者压制图片置顶 + 文字右对齐？用 flex-column-reverse 更可靠
如果需求是移动端图片在文字上方、桌面端左右并排（比如图文介绍），别依赖 order 类嵌套在 .row 里——.row 默认虽是 flex，但子项 .col 若未显式设 d-flex，order-sm-first 不起作用。
推荐结构：<div class="d-flex flex-column-reverse d-md-flex flex-md-row">
<div>文字</div>
<div>图片</div>
</div>
- 移动端：
flex-column-reverse让后写的图片出现在前（顶部） - 桌面端：
d-md-flex激活 flex，flex-md-row生效，flex-column-reverse被覆盖，恢复自然顺序 - 配合
col-md-6控制宽度，无需额外 media query 或 JS -
order类在响应式场景极不可靠：它只改变项目在主轴上的位置，不改变主轴方向本身；一旦容器从flex-column切到flex-row，同一个order-2在竖排和横排下的视觉含义完全不同
Flex 工具类不是“独立开关”，而是依赖上下文连续激活
最容易被忽略的是：Flex 工具类不是“独立开关”，它们依赖容器是否真正进入 Flex 上下文。漏掉任何一个 d-*flex，整个响应式链条就断了——尤其在嵌套结构里。
比如一个 .card 内部想让图片左、文字右，但只写了 flex-md-row 却没加 d-md-flex，那图片仍会挤在顶部或左侧，毫无反应。
-
.card默认不是 flex 容器，card-img-start只在flex-row容器中起作用，且无响应式变体 - Footer 用
d-flex flex-sm-column实现小屏垂直堆叠，但如果外层没加d-flex，flex-sm-column就是空转 - 测试时务必打开 DevTools 切到 iPhone SE 尺寸，看 computed 样式里
display是否随断点真实切换
