Rearranging responsive Bootstrap 4 grid layout

Question

Let\'s say you have a page with four main blocks in it (they would each contain varying amounts of content):

         


        
                      

              相关标签:
       
      

Answer 1

Basically this has been asked before. There is a way with Bootstrap 4, but you need to use floats instead of flexbox.

Here d-sm-block is used to apply the floats only on sm and wider. Flexbox is used for mobile which allows the ordering to work.

<div class="row d-sm-block">
    <div class="col-sm-9 order-2 order-md-0 float-left">2</div>
    <div class="col-sm-3 order-3 order-md-0 float-right">3</div>
    <div class="col-sm-3 order-1 order-md-0 float-right">1</div>
    <div class="col-sm-3 order-4 order-md-0 float-right">4</div>
</div>

Demo: https://www.codeply.com/go/ksaw8Aq2lP