在移动版本上以不同顺序引导 [英] Bootstrap with different order on mobile version

问题描述

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

I have 2 column and nested row in right column, how can i make bootstrap responsive like below,

布局:

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.

With this code the order in mobile version 1 3 2, what I want is 1 2 3.

推荐答案

由于Bootstrap 4使用flexbox，因此列总是相等的高度，您将无法获得所需的桌面(lg)布局.

Because Bootstrap 4 uses flexbox, the columns are always going to be equal height, and you'll not be able to get the desktop (lg) layout that you want.

一个选项是为lg禁用Flexbox.使用 floats (浮点数)，因为1,2列更高，因此1,3列自然会向右拉. flexbox order-将在移动设备上运行.

One option is to disable the flexbox for lg. Use floats so that the 1,3 columns naturally pull to the right, since 2 is taller. The flexbox order- will work on mobile.

https://www.codeply.com/go/8lsFAU3C5E

<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及更高版本上的flex
• float-left在禁用flex时使列浮动
• order-*在启用flex时重新排列列

• Keep columns in the same row, since ordering is relative to parent
• The d-flex d-lg-block disables flex on lg and up
• The float-left float the columns when flex is disabled
• The order-* reorder the columns when flex is enabled

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

Another option is some flexbox wrapping hack that uses w-auto...

https://www.codeply.com/go/mKykCsBFDX

另请参阅:
如何在引导程序4中修复意外的列顺序?
Bootstrap响应列高度

Also see:
How to fix unexpected column order in bootstrap 4?
Bootstrap Responsive Columns Height

B-A-C-> A-B-C

B-A-C -> A-B-C

这篇关于在移动版本上以不同顺序引导的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！