CSS布局在移动版和台式机上有所不同 [英] CSS layout with difference on mobile vs desktop

问题描述

使用CSS，如何实现以下布局?

请注意，元素的顺序在移动设备和台式机上都不相同！

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

当前，我正在使用 bootstrap 4 .以下代码适用于"桌面版本，但不适用于移动版本.

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>

如何获得所需的布局?我正在考虑使用以下解决方案:

• 引导程序4
• Flexbox
• CSS网格

推荐答案

使用Bootstrap 4获取所需顺序并使列适合"在一起的方法是禁用flexbox并将浮点数用于桌面布局...

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

带有浮子和重新排序的适合"砌体布局

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

相关:具有不同高度列的引导程序行

这篇关于CSS布局在移动版和台式机上有所不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！