javascript – Bootstrap 4：在手机上的cols之间切换

我使用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？提前致谢 ：)

解决方法:

您可以使用jQuery切换其中一个BS4 flexbox实用程序类.例如,在第一个(col-md-3)列上应用flex-last.

要使用按钮在移动设备上切换订单,请切换flex-last类…

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

编辑：一次只显示一个(使用按钮切换2个div的可见性)切换隐藏的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等.

标签：javascript,css,twitter-bootstrap,bootstrap-4,twitter-bootstrap-4
来源： https://codeday.me/bug/20190701/1350618.html