不能只用 card-img-left，因其依赖 float 且无响应式变体，小屏会错位；需改用 flex-column/flex-md-row + col 栅格手动布局，并配合 img-fluid 和 w-100 控制图片缩放与对齐。
用 Bootstrap 5 的响应式栅格和 flex 工具类控制图片位置
直接靠 card-img-left 或 card-img-top 类无法实现「大屏左置、小屏顶置」的切换——这两个类是互斥且静态的。必须放弃默认卡片结构，改用 row + col 手动布局，并借助 flex-column / flex-row 和响应式断点类控制排列方向。
-
col-md-4放图片（md及以上占4列），col-md-8放文字内容（md及以上占8列） - 在小屏（
xs）下，让整行变为垂直堆叠：flex-column配合flex-md-row - 图片本身需加
img-fluid保证缩放，避免拉伸变形
<div class="card d-flex flex-column flex-md-row">
@@##@@
<div class="card-body d-flex flex-column">
<h5 class="card-title">标题</h5>
<p class="card-text">正文...</p>
</div>
</div>
为什么不能只用 card-img-left？
card-img-left 是 Bootstrap 4/5 中为 .card 内部浮动设计的样式，它依赖 float: left 和 margin-right，且不响应屏幕尺寸变化。一旦设了这个类，图片就固定左浮，小屏时会把文字内容挤到下方并严重错位，无法自动切回顶部。
- 它没有配套的
card-img-left-sm或card-img-top-md这类响应式变体 - 与
col栅格系统不兼容：嵌套在col里的card若再用card-img-left，会导致 margin 和 width 计算冲突 - 实测在 Chrome DevTools 切换 mobile view 时，文字常被截断或换行异常
图片宽度和对齐容易踩的坑
图片在 flex-md-row 下默认会按内容宽高撑开，不加约束容易溢出或比例失真。
- 务必给图片加
w-100（全宽）+img-fluid（保持宽高比），否则小屏时可能过宽、大屏时过窄 - 不要用
card-img类——它自带object-fit: cover和固定height，会破坏响应式布局流 - 若需图片居中显示（而非拉伸填满），用
mx-auto替代w-100，但需配合max-width控制上限 -
flex-md-row在md断点生效，意味着sm及以下仍为 column；如果想从sm开始横排，换成flex-sm-row
需要适配 Card body 内部文字对齐吗？
当图片在左侧时，文字区域默认顶部对齐，但有时希望文字垂直居中（尤其图片较高时）。这不是默认行为，需手动干预。
- 给
card-body加d-flex align-items-center可垂直居中，但注意这会影响段落自然行高，可能压扁短文本 - 更稳妥的做法是用
pt-3 pt-md-0这类垂直 padding 差异来视觉平衡，而不是强依赖 flex 对齐 - 若卡片内有按钮等交互元素，
align-items-center可能导致按钮和文字基线错位，建议优先用mt-auto推到底部，而非居中
max-height: 200px），再用 object-fit: cover 裁剪，而不是靠 flex 自动撑开。
