移动端和桌面端的 CSS 布局不同

Question

使用CSS，如何实现如下布局？

请注意，元素的顺序在移动设备和桌面设备上是不同的!

目前，我正在使用 bootstrap 4。以下代码“适用于”桌面版，但不适用于移动版。

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

如何实现所需的布局？我正在考虑使用以下解决方案:

• Bootstrap 4
• flex 盒子
• CSS 网格

Answer 1

Bootstrap 4 获得所需顺序并使列“适合”在一起的方法是禁用 flexbox 并为桌面布局使用 float ...

“适合”带有 float 和重新排序的砌体布局

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

演示 https://www.codeply.com/go/U4zuuyfHQV

具有 flexbox 和重新排序的相同高度布局

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

演示 https://www.codeply.com/go/U4zuuyfHQV (选项 2)

---

相关:Bootstrap row with columns of different height