如何用Bootstrap 5.x实现桌面与移动端差异化卡片布局？

核心思路 #

利用Bootstrap 5的响应式排序类（order-*系列）结合网格系统，在移动端调整D、E卡片的显示顺序，同时保留桌面端的布局结构。

代码实现 #

<div class="container my-4">
  <div class="row">
    <!-- 卡片A：桌面左侧，移动端顶部 -->
    <div class="col-md-4 mb-3">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">卡片A</h5>
        </div>
      </div>
    </div>

    <!-- 右侧容器：桌面右侧，移动端跟随A之后 -->
    <div class="col-md-8">
      <div class="row">
        <!-- 卡片B -->
        <div class="col-12 mb-3">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">卡片B</h5>
            </div>
          </div>
        </div>

        <!-- 卡片C -->
        <div class="col-12 mb-3">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">卡片C</h5>
            </div>
          </div>
        </div>

        <!-- 卡片E：移动端排D前，桌面排D后 -->
        <div class="col-md-6 mb-3 order-1 order-md-2">
          <div class="card h-100">
            <div class="card-body">
              <h5 class="card-title">卡片E</h5>
            </div>
          </div>
        </div>

        <!-- 卡片D：桌面排E前，移动端排E后 -->
        <div class="col-md-6 mb-3 order-2 order-md-1">
          <div class="card h-100">
            <div class="card-body">
              <h5 class="card-title">卡片D</h5>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

关键说明 #

1. 响应式排序：

   • order-1/order-2：控制移动端（<768px）的显示顺序，让E卡片排在D前面
   • order-md-1/order-md-2：控制桌面端（≥768px）的显示顺序，恢复D在E左侧的布局

2. 网格适配：

   • 桌面端：A卡片占4列宽度，右侧容器占8列；B、C卡片全屏宽，D、E各占右侧容器一半宽度并排
   • 移动端：所有卡片占100%宽度堆叠，顺序为A-B-C-E-D

3. 高度对齐：添加h-100类让同排卡片高度一致，避免布局错乱

内容的提问来源于stack exchange，提问作者Brett Elliot