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

Question

我目前有如下的引导网格设置，如下所示

<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>

这会产生与此类似的效果

我现在一直在尝试编辑 Bootstrap 布局，以便在特别小的屏幕上网格折叠成这样

但是我没有成功。我尝试过的解决方案主要是使用 Order 类，但我只能在两列之间切换顺序，而不能单独切换 3 个 block 之间的顺序。我还尝试将第二列分成单独的行，但顺序似乎只在列中起作用。在引导网格中是否可以实现类似的操作，或者我必须使用 Flex 类？

Answer 1

自定义类和显示:内容可以为一些浏览器提供帮助:

示例

@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>