如何用Bootstrap 5根据视口调整行列顺序实现不同布局？

能否通过Bootstrap 5实现不同视口下的两种布局？希望尽量避免使用display:none及JS/JQuery技巧。我尝试了以下Bootstrap代码，小屏幕显示符合预期，但大屏幕未达到效果，恳请帮忙解决。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-4 col-xxl-4 col-md-4 bg-primary">
      <div class="card">1</div>
    </div>
    <div class="col-4 col-xxl-4 col-md-8 order-md-2 order-xxl-3 bg-success">
      <div class="card">2</div>
    </div>
    <div class="col-xxl-8 col-md-12 order-md-3 order-xxl-2 bg-warning">
      <div class="card">3</div>
    </div>
  </div>
</div>

你的代码问题出在xxl视口下的列宽总和超过12（4+4+8=16），导致flex布局换行逻辑混乱。调整列宽与order属性即可实现需求，无需额外隐藏或JS：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <!-- 区块1：所有视口占4列，固定在最前 -->
    <div class="col-4 col-md-4 col-xxl-4 bg-primary">
      <div class="card">1</div>
    </div>
    <!-- 区块3：小屏幕占满整行，大屏幕占8列，xxl时排在区块2前面 -->
    <div class="col-12 col-md-12 col-xxl-8 order-xxl-2 bg-warning">
      <div class="card">3</div>
    </div>
    <!-- 区块2：小屏幕占4列，中等屏幕占8列，大屏幕占满整行，xxl时排在最后 -->
    <div class="col-4 col-md-8 order-xxl-3 bg-success">
      <div class="card">2</div>
    </div>
  </div>
</div>

布局说明 #

• 小屏幕（<md）：区块1（col-4）、区块2（col-4）同行显示，区块3（col-12）占满下一行，符合预期。
• 中等屏幕（md ≤ 视口 < xxl）：区块1（col-4）、区块2（col-8）同行显示，区块3（col-12）占满下一行。
• 大屏幕（≥xxl）：区块1（col-4）+ 区块3（col-8）占满第一行，区块2（col-12）占满下一行，通过order-xxl-*调整了区块2和3的显示顺序，完全不需要display:none或JS。

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