如何使用Bootstrap 5实现自适应DIV布局及移动端顺序调整

你需要的布局和排序需求完全可以通过Bootstrap 5原生栅格系统配合少量自定义CSS实现，具体方案如下： #

1. 基础布局实现 #

Bootstrap 5的12列栅格体系中，col-6对应50%宽度，col-12对应100%宽度，你可以根据子元素数量手动配置类，也可以加少量CSS实现自动适配奇偶数量。

手动配置方案（无需额外CSS，最灵活） #

如果可以提前确定子元素数量，直接给奇数个元素的最后一项加col-*-12，其余子项加col-*-6即可，示例适配中等及以上屏幕的规则：

<!-- 父容器可以是body、td、任意div，直接嵌套row即可 -->
<div class="row g-3">
  <div class="col-md-6">DIV 1 中等及以上屏幕占50%宽度</div>
  <div class="col-md-6">DIV 2 中等及以上屏幕占50%宽度</div>
  <div class="col-md-12">DIV 3 中等及以上屏幕占100%宽度</div>
</div>

如果是偶数个子元素，所有子项统一加col-md-6，会自动每行排列2个。

自动适配方案（无需手动判断奇偶） #

如果子元素是动态生成、无法提前判断数量，加一段自定义CSS即可自动识别奇数个的最后一个元素，将其宽度设为100%：

/* 中等及以上屏幕生效，可根据需求调整断点 */
@media (min-width: 768px) {
  .auto-two-grid > *:nth-last-child(1):nth-child(odd) {
    width: 100% !important;
  }
}

对应的HTML代码无需手动区分类：

<div class="row g-3 auto-two-grid">
  <div class="col-md-6">DIV 1</div>
  <div class="col-md-6">DIV 2</div>
  <div class="col-md-6">DIV 3 自动占满100%宽度</div>
</div>

2. 展示顺序调整 #

Bootstrap 5自带order-*响应式排序类，可以直接实现不同屏幕尺寸下的顺序调整，比如实现移动端将第三个元素排到最前，大屏保持原有顺序：

<div class="row g-3 auto-two-grid">
  <div class="col-md-6 order-2 order-md-1">DIV 1 移动端排第2，大屏排第1</div>
  <div class="col-md-6 order-3 order-md-2">DIV 2 移动端排第3，大屏排第2</div>
  <div class="col-md-6 order-1 order-md-3">DIV 3 移动端排第1，大屏排第3</div>
</div>

补充说明 #

• 代码中的g-3用于控制子元素之间的间距，可根据需求替换为g-0到g-5，或者直接删除去除间距。
• 示例中使用md作为断点，可根据需求替换为sm（576px）、lg（992px）等其他Bootstrap原生断点。

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