flex-column + flex-md-row 能切换方向是因为bootstrap响应式flex类采用覆盖式生效机制：flex-column默认纵向排列，flex-md-row从768px起覆盖为横向，且必须后置以确保生效。
直接用 d-flex 搭配响应式方向类，比如 flex-column 和 flex-md-row，就能实现小屏竖排、大屏横排——不需要写 media query，也不用 js。
为什么 flex-column + flex-md-row 能切换方向
Bootstrap 的响应式 Flex 类是「覆盖式」生效：类名带断点前缀（如 md）的样式，只在对应视口及以上生效，并且会覆盖前面无前缀或更小断点的同类设置。
-
flex-column在所有尺寸下生效，让容器默认纵向排列 -
flex-md-row从 768px 起生效，把主轴方向强制切回水平，覆盖掉flex-column - 顺序很重要：
flex-md-row必须写在flex-column后面，否则会被前者压制失效
d-flex 必须显式加在容器上，不能只靠 .row
.row 默认是 display: flex，但它的子元素（.col）在未声明 d-flex 时，实际渲染依赖的是 grid 或 block 流；很多 Flex 工具类（比如 order、align-self）只对直系 Flex 子项起作用。
- 错误写法：
<div class="row"><div class="col flex-md-row"> —— <code>flex-md-row加在子项上，不起作用 - 正确写法：
<div class="d-flex flex-column flex-md-row"><div class="col-md-6"> —— 容器自己是 Flex，子项才真正受控 <li>如果内容需要等宽分栏，<code>.col-md-6这类栅格类仍可和 Flex 共存，但别嵌套.row冗余结构 - 需要小屏居中文字、大屏左对齐？用
justify-content-center justify-content-md-start - 按钮组想小屏垂直、大屏水平？写成
class="btn-group flex-column flex-md-row"，别用.btn-group-vertical - 子项太多溢出？加
flex-wrap，响应式写法是flex-wrap flex-lg-nowrap - 某一块内容想撑满剩余高度？给它加
flex-grow-1，注意父容器必须是d-flex且设了高度上下文（比如min-height: 100vh）
常见搭配与易错点
方向切换只是基础，实际布局中常要配合对齐、换行、拉伸等行为，这些也都有响应式变体。
最常被忽略的一点：Flex 布局的「视觉顺序」和 DOM 顺序是两回事。你调的是显示效果，不是 HTML 结构；所以不要指望 order 类能在嵌套 .row/.col 里可靠工作——统一收口到容器级 d-flex 才是最稳的路径。
