使用Bootstrap5在md断点处按指定顺序拆分列内卡片的实现咨询

你之前的写法不生效是因为order属性仅对flex容器的直接子元素生效，你将order加在了col内部的卡片上，父级col默认不是flex容器，所以排序规则不会生效。

直接将所有卡片对应的列作为row的直接子元素，配合Bootstrap原生的排序、响应式宽度、flex反向排列类即可实现需求，不需要新增额外CSS，仅保留原有自定义样式即可。

完整代码 #

自定义CSS（保留原有即可）

.scroll_card_expense {
  overflow-y: scroll;
  height: 700px;
}

.payee_card {
  overflow-y: scroll;
  max-height: 465px;
}

.col_height {
  max-height: 800px;
}

HTML代码

<div class="container px-3">
  <div class="row flex-md-row-reverse align-items-stretch py-3 col_height">
    <!-- 黄色高卡片 -->
    <div class="col-12 col-md-6 h-100 order-md-0 order-4">
      <div class="card my-2">
        <div class="card-body scroll_card_expense">
          ...
        </div>
      </div>
    </div>

    <!-- 浅蓝卡片 -->
    <div class="col-12 col-md-6 order-md-1 order-1">
      <div class="card my-2">
        <div class="card-body">
          ...
        </div>
      </div>
    </div>

    <!-- 深蓝卡片 -->
    <div class="col-12 col-md-6 order-md-2 order-2">
      <div class="card my-2">
        <div class="card-body">
          ...
        </div>
      </div>
    </div>

    <!-- 绿色卡片 -->
    <div class="col-12 col-md-6 order-md-3 order-3">
      <div class="card my-2">
        <div class="card-body">
          ...
        </div>
      </div>
    </div>
  </div>
</div>

实现效果 #

• 屏幕宽度小于md断点（<768px）时，所有列占满整行宽度，卡片按浅蓝→深蓝→绿色→黄色的顺序垂直排列
• 屏幕宽度大于等于md断点（≥768px）时，黄色卡片固定在右列占满整列高度，左列从上到下依次排列浅蓝、深蓝、绿色三个卡片，和需求示意图效果完全一致

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