移动端视图下如何让grid网格系统的列1堆叠显示在列2上方

实现方案 #

你可以根据你使用的技术版本选择对应方案，实现移动端列1堆叠在列2上方的需求：

方案1：Bootstrap 4及以上版本（推荐）

使用框架内置的响应式order排序类即可实现，调整后的代码如下：

<div class="row">
   <div class="col-md-6 order-1 order-md-0">
      1
   </div>
   <div class="col-md-6 order-2 order-md-1">
      2
   </div>
</div>

逻辑说明：order-*不带断点后缀时全局生效，带md后缀时仅在≥768px的桌面端生效，order数值越小排列优先级越高。以上配置会让移动端（<768px）下列1的排序优先级更高，显示在上方；桌面端保持原有的左右排列顺序。

方案2：Bootstrap 3版本

使用push/pull偏移类实现：

<div class="row">
  <div class="col-md-6 col-md-push-6">1</div>
  <div class="col-md-6 col-md-pull-6">2</div>
</div>

逻辑说明：col-md-push-6会让列1在桌面端向右偏移6列，col-md-pull-6会让列2向左偏移6列，保证桌面端左右布局正常；移动端下偏移类不生效，HTML结构中写在前面的列1会优先显示在上方。

方案3：原生CSS Grid实现

如果是自定义的Grid系统，添加对应媒体查询调整排序即可：

/* 公共网格样式 */
.row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}
/* 移动端适配 */
@media (max-width: 767px) {
  .row {
    grid-template-columns: 1fr;
  }
  /* 调整列排序，数值越小排序越靠前 */
  .col-md-6:first-child {
    order: 1;
  }
  .col-md-6:last-child {
    order: 2;
  }
}

内容的提问来源于stack exchange，提问作者Kim Joseph Penaloza