是否可以使用 bootstrap 4 网格以这种特定方式更改我的移动页面布局？答案

【问题标题】：Is it possible, using bootstrap 4 grid, to change the layout of my page for mobile in this specific way?是否可以使用 bootstrap 4 网格以这种特定方式更改我的移动页面布局？
【发布时间】：2021-02-10 13:30:19
【问题描述】：

我目前有以下这样的引导网格设置

<div class="container">
  <div class="row">
    <div class="col-4">
      <div class="A">
        A
      </div>
    </div>
    <div class="col-8">
      <div class="B">
        B
      </div>
      <div class="C">
        C
      </div>
    </div>
  </div>  
</div>

这会产生类似于这种效果的东西

我现在一直在尝试编辑引导程序布局，以便在一个超小的屏幕上，网格折叠成这样

但我没有成功。我尝试过的解决方案主要是使用 Order 类，但我只能在两列之间切换顺序，而不是单独切换 3 个块。我也尝试将第二列拆分为单独的行，但 Order 似乎只在列中起作用。在引导网格中是否有可能发生这样的事情，还是我必须使用弹性类？

【问题讨论】：

我会使用单列并使用网格排列 A、B 和 C。
另一种解决方法可能是：创建两个 B 项。将一个放在 A 项上，另一个放在 C 项上。在桌面显示 C 之上的那个，而在移动设备中显示 A 之上的那个

标签： html css bootstrap-4 flexbox

【解决方案1】：

custon 类和 display:contents 可以帮助一些浏览器：

例子

@media screen and (max-width:569px) {
  .d-sm-contents {
    display: contents
  }
  .order-top {
    order: -1;
  }
}

[class^="col"]>div {
  border: solid;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row ">
    <div class="col-sm-4 ">
      <div class="A">
        A
      </div>
    </div>
    <div class="col-sm-8 d-sm-contents">
      <div class="B col order-top">
        B
      </div>
      <div class="C col ">
        C
      </div>
    </div>
  </div>
</div>

【讨论】：

这太棒了，谢谢，显示：内容正是我之前尝试所需要的

【解决方案2】：

见下文。您需要查看完整尺寸和非完整尺寸的页面。

.row > div {
  display: grid;
}

.A {
  order: 2;
}

.B {
  order: 1;
}

.C {
  order: 3;
}

@media (min-width: 1024px) {
  .A {
    order: 1;
    grid-row-start: 1;
    grid-row-end: 3;
  }
  
  .B {
    order: 2;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
  }
  
  .C {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
}
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="A">
        A
      </div>
      <div class="B">
        B
      </div>
      <div class="C">
        C
      </div>
    </div>
  </div>
</div>

【讨论】：

非常感谢，这非常有效。最终选择了 G-Cyrillus 解决方案，因为结构与我已有的相似，但这是一个非常好的解决方案，谢谢。

【解决方案3】：

你可以试试这个技巧：

.A{ background-color:blue; height:100%}
.B{ background-color:red; }
.C{ background-color:yellow; }

div.row [class^="col"] {
    display:inline-block;
    padding:0px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <div class="A">A</div>
        </div>
        <div class="col-sm-8">
            <div class="B">B</div>
            <div class="C">C</div>
        </div>
    </div>
</div>

【讨论】：

非常感谢！此解决方案中还缺少另一件事，因为我需要 B 块在小屏幕上位于顶部，但我感谢您的意见。