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>

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

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

有没有聪明的方法来做到这一点？或者我是否必须将 dom 更改为 JavaScript？提前致谢:)

Answer 1

您可以使用 jQuery 切换 BS4 flexbox 实用程序之一 classes。例如，在第一 (col-md-3) 列上应用 flex-last。

要在移动设备上使用按钮切换顺序，请切换 flex-last class...

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

编辑： 一次只显示一个（切换2 div 使用按钮）切换 hidden-sm-down class 而不是...

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

Demo

在 Bootstrap 4 中，只能使用 CSS 切换列顺序 ，但这会根据屏幕宽度切换列，因此不是由按钮触发。

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

更新

从Bootstrap 4 Beta 3开始，ordering classes被命名为order-*，例如order-1、order-md-2等..

Answer 2

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

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

flexbox/order 文档

Bootstrap 4: 在手机上切换cols

Bootstrap 4: switch between cols on mobile

javascript

css

twitter-bootstrap

twitter-bootstrap-4

bootstrap-4