移动视图顶部的引导右列答案

【问题标题】：Bootstrap right Column on top on mobile view移动视图顶部的引导右列
【发布时间】：2014-01-25 13:47:04
【问题描述】：

我有一个这样的引导页面：

<div class="row">
    <div class="col-md-6">
        A
    </div>
    <div class="col-md-6">
       B
    </div>
</div>

看起来像：

-----
|A|B|
-----

因此，如果我在移动设备上查看它，A 列在顶部，但我希望 B 列在顶部。这可能吗？我试过推拉，但没有用。

【问题讨论】：

对于 Bootstrap 4，请参阅 salmanhijazi 的答案

标签： html css twitter-bootstrap-3

【解决方案1】：

使用Column ordering 来完成此操作。

col-md-push-6 会将列“推”到右侧 6，col-md-pull-6 将在“md”或更大的视口上将列“拉”到左侧。在任何较小的视口上，列将再次按正常顺序排列。

我认为让人们失望的是，您必须在 HTML 中将 B 放在 A 之上。可能有一种不同的方法可以做到这一点，其中 A 可以在 HTML 中高于 B，但我不知道该怎么做......

DEMO

<div class="row">
  <div class="col-md-6 col-md-push-6">B</div>
  <div class="col-md-6 col-md-pull-6">A</div>
</div>

视口 >= md

|A|B|

视口

|B|
|A|

【讨论】：

@JackTheKnife 看看这个问题的另一个答案......你按另一列的宽度推或拉一列。
@Schmalzy 哦，是的-其他答案有更好的解释。还发现有用：scotch.io/tutorials/reorder-css-columns-using-bootstrap
三列出现问题，堆栈顺序应为中、左、右。
@AmirDora 这是专门针对 Bootstrap v3 的。您可能在新的 asp.net 核心项目中使用 v4，此答案不适用。
看起来这种方法在 Bootstrap 4 中已经过时了；尝试列排序：stackoverflow.com/questions/47251394/…

【解决方案2】：

值得注意的是，如果你使用的列不都等于6，那么推送量将不等于初始列大小。

如果您有 2 列（A 和 B），并且希望 A 列更小且位于“sm”或更大视口的右侧，但位于移动 (xs) 视口之上，则可以使用以下内容：

<div class="row">
    <div class="col-sm-4 col-sm-push-8">A</div>
    <div class="col-sm-8 col-sm-pull-4">B</div>
</div>

否则，列的对齐将显示为关闭。

【讨论】：

当我设置了偏移量<div class="col-md-4 col-md-offset-1"></div><div class="col-md-6 col-md-offset-1"></div>
看起来这种方法在 Bootstrap 4 中已经过时了；尝试列排序：stackoverflow.com/questions/47251394/…

【解决方案3】：

Flexbox Direction

对于 Bootstrap 4，将以下内容之一应用于您的 .row div：

.flex-row-reverse

对于响应式设置：

.flex-sm-row-reverse
.flex-md-row-reverse
.flex-lg-row-reverse
.flex-xl-row-reverse

【讨论】：

知道如何在 vuetify 中实现同样的效果吗？

【解决方案4】：

在 Bootstrap 4 中，假设您想为大屏幕设置一个订单，而为小屏幕设置一个不同的订单：

<div class="container">
  <div class="row">
    <div class="col-6 order-1 order-lg-2">
      This column will be ordered second on large to extra large screens
    </div>
    <div class="col-6 order-2 order-lg-1">
      This column will be ordered first on large to extra large screens
    </div>
  </div>
</div>

您可以省略上面的order-1 和order-2。只是为了清楚起见而添加。默认顺序将是列在 html 中出现的顺序。

【讨论】：

【解决方案5】：

下面的代码对我有用

.row {
    display: flex;
    flex-direction: column-reverse;
}

【讨论】：

【解决方案6】：

现在（在 Bootstrap v4 中）通过添加 order-# 类来完成。

见https://getbootstrap.com/docs/4.1/migration/#grid-system-1

像这样：

<div classname='col-md-8 order-2'>...</div>
<div classname='col-md-4 order-1'>...</div>

【讨论】：

它会完全改变顺序，即使不在移动视图上。

【解决方案7】：

我有三个不同大小的 bootstrap 4 列。随着屏幕变小，第三列被隐藏，然后当屏幕变小并且 div 被堆叠时，顺序会发生变化，因此第 2 列位于顶部。

    <div class="col-xs-12 col-sm-4 col-md-3 order-2 order-sm-1">
        <h3>LEFT HAND SECTION</h3>
        <p>For news, links photos or comments.</p>
    </div>
    <div class="col-xs-12 col-sm-8 col-md-5 order-1 order-sm-2">
        <h3>MAIN SECTION</h3>
        <p>The main content for the page.</p>
    </div>
    <div class="col-xs-12 col-md-4 d-none d-md-block order-last">
        <h3>BLANK SECTION</h3>
        <p>Will usually just be blank.</p>
    </div>

我希望这会有所帮助。我发现这很难理解，但最终在这个线程的帮助下到达了那里，但它有点命中注定。

【讨论】：

太棒了。确切的东西，我一直在寻找

【解决方案8】：

我用过：

.row {
   display: flex;
   flex-direction: row-reverse;
}

【讨论】：

【解决方案9】：

这在 Bootstrap 4 上对我有用：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 order-md-last">
      <%= render 'form'%>
    </div>
    <div class="col-md-8 order-md-first">
      CONTENT
    </div>
  </div>
</div>

【讨论】：

【解决方案10】：

Bootstrap 4 包含用于 flex 的类。见：https://getbootstrap.com/docs/4.3/layout/utilities-for-layout/

<div class="row flex-column-reverse flex-md-row">
    <div class="col-sm-10">
        Col 1
    </div>
    <div class="col-sm-2">
       Col 2
    </div>
</div>

【讨论】：

【解决方案11】：

在 Bootstrap V4（2018 年 1 月 18 日发布）中，您可以使用重新排序类。重新排序选项卡下的信息。

https://getbootstrap.com/docs/4.0/layout/grid/

【讨论】：