如何在Bootstrap 5.3中实现卡片响应式布局切换（移动端/大屏）

问题分析 #

你的代码核心问题是小屏设备下强制启用了行布局：row row-cols-2会让所有屏幕尺寸都分成两列，不符合小屏图片在上、文字在下的需求。同时col-sm-6的生效逻辑和row的布局规则冲突，导致响应式失效。

修正方案 #

通过Bootstrap的响应式弹性布局类，实现小屏垂直排列、大屏水平排列的效果：

• 用flex-column flex-sm-row替代固定行布局，小屏垂直堆叠，大屏横向排列
• 移除row-cols-2，避免强制分栏
• 调整区块宽度类，确保小屏占满整行、大屏平分宽度
• 优化元素对齐方式，提升视觉一致性

修正后的代码 #

<div className="container pt-3">
  <div className="card">
    {/* 响应式布局：小屏垂直，大屏水平 */}
    <div className="flex-column flex-sm-row">
      {/* 图片区块：小屏占满整行，大屏占一半 */}
      <div className="col-sm-6 d-flex align-items-center justify-content-center p-3">
        <Image
          src="/main.webp"
          className="img-fluid rounded"
          width={400}
          height={400}
          alt="eco"
        />
      </div>
      {/* 文字内容区块：小屏占满整行，大屏占一半 */}
      <div className="col-sm-6 d-flex align-items-center p-3">
        <div className="card-body w-100">
          <h1 className="card-title">Content</h1>
          <h4 className="card-text">2000</h4>
          <ul className="list-unstyled mb-3">
            <li><h5>Content</h5></li>
            <li><h5>Content</h5></li>
            <li><h5>Content</h5></li>
            <li><h5>Content</h5></li>
            <li><h5>Content</h5></li>
          </ul>
          <p><a href="#" className='text-decoration-none'>Más características</a></p>
          <a href="#" className="btn btn-primary px-5">Ver</a>
        </div>
      </div>
    </div>
  </div>
</div>

关键类说明 #

• flex-column flex-sm-row：核心响应式控制，小屏垂直布局，大屏横向排列
• col-sm-6：仅在≥576px屏幕生效，两区块各占50%宽度；小屏自动占满整行
• d-flex align-items-center：确保图片和文字在区块内垂直居中，优化视觉对齐
• img-fluid：让图片自动适配容器宽度，保持响应式适配

内容的提问来源于stack exchange，提问作者Jose-xd