javascript - Bootstrap 4 : switch between cols on mobile

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 实用程序类之一。例如，在第一列 (col-md-3) 上应用 flex-last。

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

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

编辑: 要一次只显示一个(使用按钮切换 2 个 div 的可见性)切换 hidden-sm-down 类代替...

$('#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等。