CSS layout with difference on mobile vs desktop

问题:

Using CSS, how can I achieve the following layout?

Notice that the order of the elements is different on mobile vs desktop!

Currently, I am using bootstrap 4. The following code "works" for the desktop version, however, does not work for the mobile version.

<div class="container">
    <div class="row">

        <div class="col-md-4">    
            <div class="a">
                A
            </div>
            <div class="d">
                D
            </div>
        </div>

        <div class="col-md-8">
            <div class="b">
                B
            </div>
            <div class="c">
                C
            </div>
        </div>

    </div>
</div>

How can I achieve the desired layout? I am considering solutions using:

• Bootstrap 4
• Flexbox
• CSS Grid

回答1:

Seeing as you're already using Bootstrap, you can use pushes and pulls to achieve this:

<div class="container">
  <div class="row">
    <div class="a col-md-4">
      A
    </div>
    <div class="b col-md-8">
      B
    </div>
    <div class="c col-md-8 col-md-push-4">
      C
    </div>
    <div class="d col-md-4 col-md-pull-8">
      D
    </div>
  </div>
</div>

See this example: https://codepen.io/bretteast/pen/VxKyLX

And these docs: https://getbootstrap.com/docs/3.3/css/#grid-column-ordering

回答2:

The Bootstrap 4 way to get the order you want, and make columns "fit" together is to disable flexbox and use floats for the desktop layout...

"Fit" masonry layout with floats and reordering

<div class="container">
    <div class="row no-gutters d-block">
        <div class="col-md-4 float-left">    
            <div class="a">
                A
            </div>
        </div>
        <div class="col-md-8 float-left">
            <div class="b">
                B
            </div>
        </div>
        <div class="col-md-8 float-right">
            <div class="c">
                C
            </div>
        </div>
        <div class="col-md-4 float-left">    
            <div class="d">
                D
            </div>
        </div>
    </div>
</div>

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

Same heights layout with flexbox and reordering

   <div class="row text-white no-gutters">
        <div class="col-md-4">
            <div class="a">
                A
            </div>
        </div>
        <div class="col-md-8">
            <div class="b">
                B
            </div>
        </div>
        <div class="col-md-4 order-last order-md-0">
            <div class="d">
                D
            </div>
        </div>
        <div class="col-md-8">
            <div class="c">
                C
            </div>
        </div>
    </div>

Demo https://www.codeply.com/go/U4zuuyfHQV (option 2)

---

Related: Bootstrap row with columns of different height