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

【问题标题】：CSS layout with difference on mobile vs desktop移动端和桌面端的 CSS 布局不同
【发布时间】：2018-10-07 05:04:51
【问题描述】：

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

我怎样才能实现所需的布局？我正在考虑使用以下解决方案：

引导程序 4
弹性盒
CSS 网格

【问题讨论】：

标签： css twitter-bootstrap flexbox bootstrap-4

【解决方案1】：

鉴于您已经在使用 Bootstrap，您可以使用推送和拉取来实现此目的：

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

请参阅此示例：https://codepen.io/bretteast/pen/VxKyLX

还有这些文档：https://getbootstrap.com/docs/3.3/css/#grid-column-ordering

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

谢谢，我现在正在寻找一个 flexbox 版本。几分钟前有一个，但被删除了。
Flexbox 对此不起作用，因为您无法在不同的父母中重新排序子 div。这就是为什么您需要在这种特定情况下使用浮点数。
它们不必位于不同的父 div 中。如有必要，它们都可以在同一个父 div 中。
没错，但是它们不会像桌面图像中显示的“砌体”模式那样“装配”在一起，因为 flexbox 使列具有相同的高度。
好的，我明白你在说什么。但碰巧在这种特殊情况下，我不需要 A 和 B 在桌面上具有不同的高度。它们在桌面上可以是相同的高度。只要顺序正确，我就很高兴。至少现在是这样。