Bootstrap 4: switch between cols on mobile devices

Question

I built a standard layout with a sidebar using the Bootstrap grid (EDIT: I use Bootstrap 4, but can 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 the mobile phone, the red area will be above the green. I need to be able to switch between them in a way that is more convenient than scrolling, like a toggle button:

Also note the different elements in the green area.

Is there any reasonable way to do this? Or do I need to change dom using JavaScript? Thanks in advance:)

Answer 1

jQuery BS4 flexbox. , flex-last (col-md-3).

, flex-last...

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

: ( ) hidden-sm-down... p >

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

---

Bootstrap 4 CSS , cols , , .

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

Answer 2

Bootstrap 4 Flexbox, , .

, , , , order-last order-sm-unordered.

flexbox/