在移动版本上以不同顺序引导

小编典典

在移动版本上以不同顺序引导

css

我在右列中有2列和嵌套行，如何使Bootstrap响应如下，

布局：

desktop version
--------- ------
|   2   ||  1  |
|       ||     |
|       |-------
|       ||  3  |
|       ||     |
|       |-------
|       |
|       |
---------

mobile version (stacked in order)
--------
|  1   |
|      |
--------
|  2   |
|      |
|      |
|      |
|      |
|      |
--------
|  3   |
|      |
--------

这是我的代码：

<div class="row">
   <div class="col-lg-4">
     <div class="row">
         <div class="col-lg-12">1
     </div>
      <div class="row">
         <div class="col-lg-12">3
     </div>
   </div>
   <div class="col-lg-8 order-lg-first">2
   </div>
</div>

使用此代码，移动版本为1 3 2的订单为1 2 3。

阅读 224

2020-05-16

共1个答案

小编典典

因为Bootstrap 4使用的是flexbox，所以 列的高度总是相等的 ，因此您将无法获得所需的桌面（lg）布局。

一种选择 是禁用的flexbox lg。使用 浮点数 ，以使1,3列自然向右拉，因为2更高。Flexbox
order-将在移动设备上运行。

<div class="container">
    <div class="row d-flex d-lg-block">
         <div class="col-lg-8 order-1 float-left">
            <div class="card card-body tall">2</div>
        </div>
        <div class="col-lg-4 order-0 float-left">
            <div class="card card-body">1</div>
        </div>
        <div class="col-lg-4 order-1 float-left">
            <div class="card card-body">3</div>
        </div>
    </div>
</div>

如何运作

将列保持在同一行中，因为顺序是相对于父级的
在d-flex d-lg-block禁止弯曲的lg和最多
该float-left浮动时，Flex是禁用的列
在order-*重新排序列弯曲时启用

另一个选择 是一些使用w-auto…

2020-05-16