Bootstrap 5响应式布局：小屏如何将外部列移入指定列内部？

你需要的是在md及以上断点保持两列并排布局，xs/sm断点时将蓝色内容移入黄色容器内部的特定位置——单纯用.order-*类做不到这点，因为.order-*只能调整同级元素的排列顺序，无法实现跨容器的元素迁移。最直接的解决方案是复制目标内容，结合Bootstrap的响应式显示/隐藏类来实现，具体代码如下：

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="d-md-flex">
    <div class="col-md-8 bg-warning">
      <div>first div</div>
      <!-- xs/sm断点显示的蓝色内容副本 -->
      <div class="bg-info d-md-none">
        other content
      </div>
      <div>second div</div>
      <div>third div</div>
    </div>
    <!-- md及以上断点显示的蓝色列，xs/sm断点隐藏 -->
    <div class="col-md-3 bg-info d-none d-md-block">
      other content
    </div>
  </div>
</body>

关键类的作用说明：

• d-md-flex：仅在md及以上断点启用flex布局，xs/sm断点下容器为块级，内部元素自动垂直堆叠
• col-md-8/col-md-3：仅在md及以上断点应用列宽，xs/sm断点下黄色容器默认占满100%宽度
• d-md-none：在md及以上断点隐藏黄色容器内的蓝色内容副本
• d-none d-md-block：xs/sm断点下隐藏独立的蓝色列，md及以上断点显示它

如果蓝色内容是动态生成的（比如后端渲染或JS生成），可以通过模板复用、组件化或者JS同步内容的方式，避免重复编写静态代码。

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