Question

我有一个像这样的Bootstrap页面：

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

看起来像：

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

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

Answer 1

使用Column ordering来完成此任务。

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

我认为是什么让人们失望，是你必须在你的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>

view-port＆gt; = md

|A|B|

view-port＆lt; MD

|B|
|A|

Answer 2

值得注意的是，如果您使用的列不等于6，则推送量不会等于初始列大小。

如果您有2列（A＆amp; B）并且希望A列更小并且在＃34; sm＆＃34;或者更大的视口，但在移动（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>

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

Answer 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

Answer 4

以下代码适用于我

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

Answer 5

在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中出现的顺序。

有关更多信息，https://getbootstrap.com/docs/4.1/layout/grid/#reordering

Answer 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>

Answer 7

这在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>

Answer 8

我用过：

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

Answer 9

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

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

Answer 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>

Answer 11

我有三个不同大小的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>

我希望这会有所帮助。我发现很难理解这一点，但最终在此线程的帮助下到达了那里，但这是一个偶然的机会。

在移动视图顶部的Bootstrap右列

11 个答案: