如何使用Flex属性实现指定响应式布局：左列对齐+特定堆叠顺序

核心思路是结合Bootstrap的flex布局类和order排序类，分别处理大屏和小屏的布局逻辑：

大屏布局（md及以上尺寸） #

• 主容器使用d-flex flex-wrap开启弹性换行布局
• 元素1和元素2设置固定宽度占比（比如用col-md-4），实现左侧上下紧密排列
• 元素3设置剩余空间填充（flex-grow-1），并通过col-md-8占据右侧区域，自适应剩余空间

小屏布局（sm及以下尺寸） #

• 利用Bootstrap的order-*类调整元素顺序：给元素1设order-1，元素3设order-2，元素2设order-3，实现垂直堆叠时1→3→2的顺序
• 配合mt-2 mt-md-0类处理不同尺寸下的间距，避免布局拥挤

完整代码示例 #

<!-- 主容器 -->
<div class="d-flex flex-wrap">
  <!-- 元素1：大屏占左列上半，小屏排第一 -->
  <div class="bg-primary p-4 col-md-4 mb-2 mb-md-0">元素1</div>
  
  <!-- 元素2：大屏占左列下半，小屏排第三 -->
  <div class="bg-secondary p-4 col-md-4 order-3 order-md-2">元素2</div>
  
  <!-- 元素3：大屏占右列自适应，小屏排第二 -->
  <div class="bg-success p-4 col-md-8 flex-grow-1 order-2 order-md-3 mt-2 mt-md-0">元素3</div>
</div>

关键属性说明 #

• d-flex flex-wrap：让容器内元素在空间不足时自动换行，为大屏左右布局、小屏垂直堆叠提供基础
• col-md-4/col-md-8：控制大屏下元素的宽度占比，确保1、2在左侧，3在右侧
• order-*：通过不同断点的order值，动态调整小屏和大屏下的元素显示顺序
• flex-grow-1：让元素3在大屏时自动填充右侧剩余空间
• mb-2 mt-md-0：处理不同尺寸下的间距，保证布局美观

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