如何仅在移动视图中堆叠特定列

Question

我正在尝试 bootstrap 网格布局，我只需要在移动视图中堆叠特定列。

例如colA | colB | colC |冷|科尔

桌面应该是

colA colB colC colD colE - 这很好

手机应该是 C 列应该在 B 列下面。

colA colB colD colE
     colc

我试过下面的代码，它在桌面上工作正常，正如预期的那样，

 <div class="container">
    <div class="row">
        <div class="col-6 col-md-1">Col A</div>
        <div class="col-6 col-md-2">Col B</div>
        <div class="col-6 col-md-4">Col C</div>
        <div class="col-6 col-md-3">Col D</div>
        <div class="col-6 col-md-2">Col E</div>
      </div>        
  </div>

当我在移动列 C 中查看时，后续列显示在列 A 下方。任何人都可以指导我如何实现这一点。提前致谢。

Answer 1

您可以按如下方式实现它：

<div class="container">
    <div class="row">
        <div class="col-md-2 col-sm-2">Col A</div>
        <div class="col-md-6 col-sm-6 row">
                  <div class="col-md-6">Col B</div>
                  <div class="col-md-6">Col C</div>                     
        </div>
        <div class="col-md-2 col-sm-2">Col D</div>
        <div class="col-md-2 col-sm-2">Col E</div>

    </div>        
  </div>

如何仅在移动视图中堆叠特定列

How to stack the specific columns only in mobile view

bootstrap-4

bootstrap-grid