Bootstrap 4：在移动设备上的cols之间切换 [英] Bootstrap 4: switch between cols on mobile

问题描述

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

I've built a standard layout with a sidebar using Bootstrap's grid system ( I'm using Bootstrap 4 but could still switch). It looks like this:

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

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

On mobile, the red area would be above the green one. I need to be able to switch between them in a way that is more convenient than scrolling, for example a switch button:

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

Also note the different oder of elements in the green area.

有没有聪明的方法做这个？或者我是否必须使用JavaScript更改dom？在此先感谢：）

Is there a smart way to do this? Or do I have to alter the dom with JavaScript? Thanks in advance :)

推荐答案

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

You can use jQuery to toggle one of the BS4 flexbox utility classes. For example, apply the flex-last on the first (col-md-3) column.

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

To switch the order on mobile using a button, toggle the flex-last class...

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

编辑： 要一次只显示 （使用按钮切换2个div的可见性）切换隐藏 - sm-down 类而不是...

To show only one at a time (switch the visibility of the 2 divs using a button) toggle the hidden-sm-down class instead...

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

Demo

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

In Bootstrap 4, column order can be toggled using CSS only, but this switches the cols based on screen width, and therefore is not triggered by the button.

<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开始，订购类是命名为 order - * ，例如 order-1 ， order-md-2 等等。

As of Bootstrap 4 Beta 3, the ordering classes are named order-*, such as order-1, order-md-2, etc..

这篇关于Bootstrap 4：在移动设备上的cols之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！