Bootstrap 4：在移动设备上的cols之间切换

Question

我使用Bootstrap的网格系统构建了带侧边栏的标准布局（编辑：我使用Bootstrap 4但仍然可以切换）。它看起来像这样：

<div class="row">
  <div class="col-md-3">
    ...
  </div>
  <div class="col-md-9">
    <div class="row">
      <div class="col-md-4">...</div>
      <div class="col-md-4">...</div>
      <div class="col-md-4">...</div>
    </div>
  </div>
</div>

在移动设备上，红色区域将高于绿色区域。我需要能够以比滚动更方便的方式在它们之间切换，例如切换按钮：

还要注意绿色区域中不同的元素。

有一种聪明的方法吗？或者我是否必须使用JavaScript更改dom？在此先感谢：）

Answer 1

您可以使用jQuery切换其中一个BS4 flexbox实用程序类。例如，在第一个（flex-last）列上应用col-md-3。

使用按钮在移动设备上切换订单，切换flex-last类......

$('#btnToggle').click(function(){
    $('.col-md-3').toggleClass('flex-last');
})

编辑： 要一次只显示一个 （使用按钮切换2个div的可见性）切换{{1而不是......

hidden-sm-down

Demo

在Bootstrap 4中，可以使用仅CSS 切换列顺序，但这会根据屏幕宽度切换列，因此不会被按钮触发。

$('#btnToggle').click(function(){
    $('.col-md-3, .col-md-9').toggleClass('hidden-sm-down');
})

更新

从Bootstrap 4 Beta 3开始，ordering classes被命名为<div class="row"> <div class="col-md-3 flex-last flex-md-unordered"> ... </div> <div class="col-md-9"> <div class="row"> <div class="col-md-4">...</div> <div class="col-md-4">...</div> <div class="col-md-4">...</div> </div> </div> </div> ，例如order-*，order-1等。

Answer 2

Bootstrap 4使用Flexbox，这意味着您可以使用显示内容的订单。

像往常一样，您可以使用order-last和order-sm-unordered等类指定在不同视口中显示的方式。

flexbox/order文档