在移动视图上将第 1 列堆叠在第 2 列上答案

【问题标题】：Stack column 1 over column 2 on mobile view在移动视图上将第 1 列堆叠在第 2 列上
【发布时间】：2021-10-17 22:36:53
【问题描述】：

我正在使用网格系统，并且有 2 列，如下所示：

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

我想要的是将第 1 列堆叠在第 2 列上，而不是将第 1 列堆叠在第 2 列之上。这是我得到的： Result

这就是我要找的： Wanted Result

【问题讨论】：

标签： html bootstrap-4 bootstrap-5

【解决方案1】：

我自己解决了，你可以试试

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

.row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.col-md-6 {
  grid-column: 1;
  grid-row: 1;
}

【讨论】：

【解决方案2】：

您可以通过简单地将每列的位置设置为绝对来实现这一点。

此外，您还可以编写与引导程序的breakpoints system 匹配的media query，以仅在较小的设备上启用此行为。我在下面显示了所有可能的断点。您可以将代码移动到所需的媒体查询，以在所需的屏幕尺寸上启用和禁用此行为。

/* X-Small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }*/

/** Medium devices (tablets, less than 992px) **/
@media (max-width: 991.98px) {
  .blue{
    background-color: rgba(0, 0, 255, 0.5);
    position: absolute;
  }
  .red {
    background-color: rgba(255, 0, 0, 0.5);
    position: absolute;
  }
}

/*
// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width
*/

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="row">
  <div class="col-md-6 red fs-2 text">
    1
  </div>
  <div class="col-md-6 blue fs-2 text">
    2
  </div>
</div>

【讨论】：

【解决方案3】：

当您对任何部分使用绝对位置时，它就像一艘浮船。默认位置是 left = 0 和 top = 0。因此，当它在超过中等设备中处于活动状态时，它是重叠的。所以必须定义，哪个部分设置了上、左、右、下的位置。

/* X-Small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }*/

/** Medium devices (tablets, less than 992px) **/
@media (max-width: 991.98px) {
  .blue{
    background-color: rgba(0, 0, 255, 0.5);
    position: absolute;
    right: 0;
  }
  .red {
    background-color: rgba(255, 0, 0, 0.5);
    position: absolute;
    left: 0;
  }
}

/*
// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width
*/

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="row">
  <div class="col-md-6 red fs-2 text">
    1
  </div>
  <div class="col-md-6 blue fs-2 text">
    2
  </div>
</div>

** 您可以从 col-md-6 中跳过 md 以让所有设备正常工作。

【讨论】：

【解决方案4】：

使用order-*

Bootstrap 4 Order

Bootstrap 5 Order

<div class="col">
    First in DOM, no order applied
    </div>
    <div class="col order-5">
        Second in DOM, with a larger order
    </div>
    <div class="col order-1">
        Third in DOM, with an order of 1
    </div>
</div>

【讨论】：