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

我正在尝试引导网格布局，我只需要在移动视图上堆叠特定的列

e、 g可乐|可乐|可乐|冷|可乐

桌面应该是

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

科拉
B列
C柱
D列
科勒

---

当我在mobile col C中查看并且随后的列显示在col A下时。有人能指导我如何实现这一点吗。提前感谢。

您可以按以下方式实施：

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

科拉
B列
C柱
D列
科勒