如何借助Bootstrap断点调整栅格系统的列排列顺序

第一步：修正原代码的语法问题 #

你提供的HTML存在标签闭合错误：所有列、行、外层容器的收尾位置都误写了开始标签<div>而非闭合标签</div>，会导致浏览器解析DOM时结构错乱，先将这部分修改为合法闭合的结构。

第二步：结合Bootstrap栅格能力实现响应式布局 #

Bootstrap的栅格行（带row类的元素）本身是Flex布局容器，支持内置的order-*系列排序类，可以按断点粒度调整列的显示顺序，刚好匹配你的需求：

• 核心逻辑：屏幕宽度小于720px时，让Column1在Column2上方；断点以上的宽屏保持你需要的双栏并排、可自定义顺序的效果。因为未带断点前缀的布局规则对所有屏幕尺寸生效，只需要把排序类限定在断点宽度以上触发，小屏时列就会自动按照原始DOM文档流排列，无需额外书写小屏的排序规则。
• 具体实现：
  1. 适配Bootstrap默认断点（md断点触发阈值为768px，和你要求的720px阈值差异极小，可覆盖绝大多数使用场景），只需要在列元素上补充对应md断点下的排序类即可：

  <div class="container-fluid h-100">
    <div class="row no-gutters h-100">
      <!-- Column1：小屏保持文档流顺序在上，md及以上调整到第二排序位 -->
      <div class="col-12 col-md-6 order-md-2 left">
        Column 1
      </div>
      <!-- Column2：小屏保持文档流顺序在下，md及以上调整到第一排序位 -->
      <div class="col-12 col-md-6 order-md-1 left">
        Column 2
      </div>
    </div>
  </div>
  

  2. 实际生效效果：
     • 屏幕宽度小于720px：所有带md前缀的栅格类完全不生效，两个列按原始DOM顺序纵向单栏排列，Column1在上、Column2在下，完全匹配需求。
     • 屏幕宽度大于等于720px：两个列各占50%宽度横向并排，同时按照设定的排序类调整横向排列顺序。
• 如果你需要精准以720px为布局切换临界点，无需修改Bootstrap的默认断点配置，只需要在自定义CSS中补充对应断点下的栅格规则即可：

  @media (min-width: 720px) {
    /* 控制两个列在720px以上各占50%宽度 */
    .col-md-6 {
      width: 50%;
    }
    /* 定义720px以上的列排序规则 */
    .order-md-1 {
      order: 1;
    }
    .order-md-2 {
      order: 2;
    }
  }
  

这样就能精准把720px作为布局切换的阈值，不会因为默认断点的微小差异影响布局效果。

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