直接用.row+.col-md-6可实现左右对开，但响应式需匹配断点（如.col-md-6仅≥768px生效，小屏退化为100%堆叠）、规范容器（必套.container或.container-fluid）、拉齐高度（.row加align-items-stretch，内部卡片加h-100），否则小屏塌陷或高低不一。
直接用 .row + .col-md-6 就能实现左右对开，但“响应式”不是写完就完事——关键看断点是否匹配、容器是否规范、高度是否拉齐，否则小屏下会塌成一列，或者两列高低不一。
为什么缩放浏览器时两列突然变成一列？
这不是 Bug，是 Bootstrap 响应式机制在生效。常见错误是只写了 .col-6 或 .col-md-6 却没确认目标设备宽度是否触发该断点：
-
.col-md-6只在 ≥768px（md 断点）生效；小屏下它退化为 100% 宽度，自然堆叠 - 想从手机起就两列，得用
.col-6（所有尺寸）或.col-sm-6（≥576px） - 别混用已废弃的
.col-xs-6（Bootstrap 4+ 已移除） - 外层必须套
.container或.container-fluid，否则.row的负 margin 会破坏布局
两列高度不一致，怎么让它们视觉上“等高”？
.row 默认是 flex 容器，但 align-items: normal，不会拉伸子项。结果就是：左边一段文字，右边一张大图，右边撑高整行，左边却贴顶留白。
- 给
.row显式加align-items-stretch（Bootstrap 4/5 都支持） - 删掉
.col-6内部的height: 100%、min-height等手动设高样式，它们会干扰 flex 拉伸 - 真正需要等高的，是列内部的卡片或内容块，比如给
.card加h-100，而不是给列本身加
移动端想图片在上、文字在下，桌面端左右并排怎么办？
别用 order 类嵌套调序，也别靠 JS 或媒体查询切换 DOM——容易失效且难维护。Bootstrap 5 的 d-flex 工具类更可靠：
- 父容器加
d-flex flex-column-reverse flex-md-row：小屏垂直反向（后写的图片渲染在前），中屏起恢复水平流 - 两个子块都加
col-md-6：桌面端各占半宽；移动端因flex-column生效，col-md-6自动转为flex: 1 - 确保子块是
.col-md-6直接子元素，中间不要漏掉.row——嵌套栅格必须带.row，否则.col会错位甚至塌陷
最易被忽略的是：flex-direction 切换后，align-items 不继承，子级如果再套 .row，得单独重置对齐方式；还有图片加载前的高度塌陷问题，建议统一设 style="height: 200px; object-fit: cover;" 配合 .img-fluid。
