移动版本上不同顺序的引导程序答案

【问题标题】：Bootstrap with different order on mobile version移动版本上不同顺序的引导程序
【发布时间】：2018-07-30 15:25:52
【问题描述】：

我在右列有 2 列和嵌套行，我怎样才能使引导程序响应如下，

布局：

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。

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

因为 Bootstrap 4 使用 flexbox，列总是会等高，你将无法获得你想要的桌面 (lg) 布局。

一个选项是禁用lg 的弹性框。使用浮动以便 1,3 列自然拉到右侧，因为 2 更高。 flexbox order- 可以在移动设备上使用。

https://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 时重新排序列

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

https://codeply.com/go/mKykCsBFDX

另见：
How to fix unexpected column order in bootstrap 4?
Bootstrap Responsive Columns Height

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

【讨论】：

如果第 1 列高于第 2 列，这将不起作用。在这种情况下，第 3 列将位于第 2 列的下方，位于 1 的左侧。关于如何解决此问题的任何建议？
只是为了回答我自己的问题，如果 2 比 1 短，请将 float-right 添加到 3 而不是左侧，以使其保持在右侧。

【解决方案2】：

要在 Bootstrap 4 中实现这一点，您需要“2”列的 order-lg-first 类和“3”列的 offset-lg-8 类（假设它们在 HTML 中按 1-2-3 排序）。

offset-lg-8 类将在大屏幕 (lg) 或更大的屏幕上偏移（即向右推）第三列 8 个单位（=与第二列的宽度相同），从而产生想要的结果。

这是一个工作代码sn-p（点击下面的“运行代码sn-p”并展开到整页）：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-lg-4 bg-warning">1</div>
        <div class="col-lg-8 order-lg-first bg-secondary">2</div>
        <div class="col-lg-4 offset-lg-8 bg-warning">3</div>
    </div>
</div>

【讨论】：

谢谢，但如果“2”的高度大于“1”，则桌面版本中的“1”和“3”之间会有空格。有解决办法吗？（桌面版中的“3”总是在“1”之下）。谢谢
你是说桌面上“2”的高度必须与其他div无关？

【解决方案3】：

您可以使用推拉来更改列的顺序。查看更多信息here

<div class="row">
    <div class="col-md-4 col-md-push-4">
        <div class="alert alert-danger">B</div>
    </div>
    <div class="col-md-4 col-md-pull-4 col-sm-6">
        <div class="alert alert-info">A</div>
    </div>
    <div class="col-md-4 col-sm-6">
        <div class="alert alert-info">C</div>
    </div>
</div>

【讨论】：