CSS布局在移动版和台式机上有所不同

本文介绍了CSS布局在移动版和台式机上有所不同的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

演示 www.codeply/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>

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

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