如何更改移动布局上的 Bootstrap 3 列顺序？

2018 年更新

对于基于 Bootstrap 3 的原始问题，解决方案是使用推拉。

在 Bootstrap 4 中，现在可以更改顺序，即使列是全宽垂直堆叠，这要归功于 Bootstrap 4 flexbox。 OFC，推拉方法仍然可以工作，但现在有其他方法可以在 Bootstrap 4 中更改列顺序，从而可以重新排序全宽列。

方法 1 - 将 flex-column-reverse 用于 xs 个屏幕：

<div class="row flex-column-reverse flex-md-row">
    <div class="col-md-3">
        sidebar
    </div>
    <div class="col-md-9">
        main
    </div>
</div>

方法 2 - 将 order-first 用于 xs 个屏幕：

<div class="row">
    <div class="col-md-3">
        sidebar
    </div>
    <div class="col-md-9 order-first order-md-last">
        main
    </div>
</div>

引导程序 4（alpha 6）：http://www.codeply.com/go/bBMOsvtJhD
引导程序 4.1：https://www.codeply.com/go/e0v77yGtcr

原始 3.x 答案

对于基于 Bootstrap 3 的原始问题，解决方案是对较大的宽度使用推拉，然后列将显示它们在较小 (xs) 宽度上的自然顺序。 （AB 反转为 BA）。

<div class="container">
    <div class="row">
        <div class="col-md-9 col-md-push-3">
            main
        </div>
        <div class="col-md-3 col-md-pull-9">
            sidebar
        </div>
    </div>
</div>

引导程序 3：http://www.codeply.com/go/wgzJXs3gel

@emre 说，“你不能在小屏幕上改变列的顺序，但你可以在大屏幕上做到这一点”。但是，这应该澄清为：“您不能更改全角“堆叠”列的顺序..”在 Bootstrap 3 中。

---

引导程序 3 个答案

这里的答案仅适用于 2 个单元格，但是一旦这些列中包含更多单元格，它就会导致更多的复杂性。我想我已经为多列中的任意数量的单元格找到了一个通用的解决方案。

目标

在移动设备上获取垂直序列的标签，以按照设计在平板电脑/台式机上的任何顺序排列自己。在这个具体示例中，一个标签必须比正常情况更早进入流程，而另一个标签必须比正常情况更晚。

移动的

[1 headline]
[2 image]
[3 qty]
[4 caption]
[5 desc]

平板电脑+

[2 image  ][1 headline]
[         ][3 qty     ]
[         ][5 desc    ]
[4 caption][          ]
[         ][          ]

所以标题需要在平板电脑+上直接洗牌，从技术上讲，desc也是如此——它位于移动设备上的标题标签上方。你马上就会看到 4 标题也有问题。

让我们假设每个单元格的高度可能不同，并且需要与其下一个单元格从上到下齐平（排除像桌子这样的弱技巧）。

与所有 Bootstrap Grid 问题一样，第 1 步是意识到 HTML 必须在页面上按移动顺序排列，1 2 3 4 5。然后，确定如何让平板电脑/台式机以这种方式重新排序 - 最好不要使用 Javascript。

让 1 headline 和 3 qty 坐在右侧而不是左侧的解决方案是简单地将它们都设置为 pull-right。这适用于 CSS float: right，这意味着他们会找到适合右侧的第一个开放空间。您可以认为浏览器的 CSS 处理器按以下顺序工作： 1 适合右上角。 2 是下一个并且是常规的 (float: left)，所以它转到左上角。然后是 3，即 float: right，所以它跳过了 1。

但是这个解决方案对于 4 caption 来说是不够的；因为右边的 2 个单元格太短了，左边的 2 image 往往比它们两者的总和长。 Bootstrap Grid 是一种美化的浮动 hack，意味着 4 caption 是 float: left。由于 2 image 在左侧占据了如此多的空间，4 caption 试图适应下一个可用空间 - 通常是右侧列，而不是我们想要的左侧。

这里的解决方案（以及更普遍的任何此类问题）是添加一个隐藏在移动设备上的 hack 标签，该标签存在于 tablet+ 上以推出标题，然后被负边距覆盖 - 如下所示：

[2 image  ][1 headline]
[         ][3 qty     ]
[         ][4 hack    ]
[5 caption][6 desc ^^^]
[         ][          ]

http://jsfiddle.net/b9chris/52VtD/16633/

HTML：

<div id=headline class="col-xs-12 col-sm-6 pull-right">Product Headline</div>
<div id=image class="col-xs-12 col-sm-6">Product Image</div>
<div id=qty class="col-xs-12 col-sm-6 pull-right">Qty, Add to cart</div>
<div id=hack class="hidden-xs col-sm-6">Hack</div>
<div id=caption class="col-xs-12 col-sm-6">Product image caption</div>
<div id=desc class="col-xs-12 col-sm-6 pull-right">Product description</div>

CSS：

#hack { height: 50px; }

@media (min-width: @screen-sm) {
    #desc { margin-top: -50px; }
}

因此，这里的通用解决方案是添加可以在移动设备上消失的 hack 标签。在 tablet+ 上，hack 标签允许显示的标签在流程中更早或更晚出现，然后向上或向下拉以掩盖这些 hack 标签。

注意：为了链接的 jsfiddle 中的简单示例，我使用了固定高度，但我正在处理的实际网站内容在所有 5 个标签中的高度各不相同。它可以正确渲染，标签高度的变化相对较大，尤其是图像和 desc。

注意 2： 根据您的布局，您可能在 tablet+（或更大的分辨率）上具有足够一致的列顺序，您可以避免使用 hack 标签，而是使用 margin-bottom，如下所示：

注意 3：这使用 Bootstrap 3。Bootstrap 4 使用不同的网格集，并且不适用于这些示例。

http://jsfiddle.net/b9chris/52VtD/16632/

---

2017 年 10 月

我想添加另一个 Bootstrap 4 解决方案。一个对我有用的。

CSS“Order”属性与媒体查询相结合，可用于在列堆叠在较小的屏幕中时对其进行重新排序。

像这样的东西：

@media only screen and (max-width: 768px) {
    #first {
        order: 2;
    }
    #second {
        order: 4;
    }
    #third {
        order: 1;
    }
    #fourth {
        order: 3;
    }
}

CodePen 链接： https://codepen.io/preston206/pen/EwrXqm

调整屏幕大小，您会看到列以不同的顺序堆叠。

我将把它与原始海报的问题联系起来。使用 CSS，可以定位导航栏、侧边栏和内容，然后对媒体查询中应用的属性进行排序。

---

在 Bootstrap 4 中，如果你想做这样的事情：

    Mobile  |   Desktop
-----------------------------
    A       |       A
    C       |   B       C
    B       |       D
    D       |

您需要颠倒 B 然后 C 的顺序，然后将 order-{breakpoint}-first 应用于 B。并应用两种不同的设置，一种使它们共享相同的列，另一种使它们占据 12 列的全部宽度：

较小的屏幕：12 列到 B 和 12 列到 C

更大的屏幕：它们之间的总和为 12 列 (B + C = 12)

像这样

<div class='row no-gutters'>
    <div class='col-12'>
        A
    </div>
    <div class='col-12'>
        <div class='row no-gutters'>
            <div class='col-12 col-md-6'>
                C
            </div>
            <div class='col-12 col-md-6 order-md-first'>
                B
            </div>
        </div>
    </div>
    <div class='col-12'>
        D
    </div>
</div>

演示： https://codepen.io/anon/pen/wXLGKa

---

首先从移动版本开始，大多数时候你可以实现你想要的。

这里的例子：

http://jsbin.com/wulexiq/edit?html,css,output

<div class="container">
      <h1>PUSH - PULL Bootstrap demo</h1>
    <h2>Version 1:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-5 col-sm-push-3 green">
        IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-push-3 gold">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-3 col-sm-pull-9 red">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

    <h2>Version 2:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-4 col-sm-push-8 yellow">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-4 blue">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-4 pink">
        IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

    <h2>Version 3:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-5 cyan">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN TOP ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-3 col-sm-push-4 orange">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-3 brown">
        IN THE MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW XS-SMALL SCREEN
      </div>

    </div>

    <h2>Version 4:</h2>
    <div class="row">

      <div class="col-xs-12 col-sm-4 col-sm-push-8 darkblue">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 beige">
        MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-8 silver">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

  </div>

---

对于使用 insertAfter() 或 insertBefore() 的 jQuery，这很容易：

<div class="left">content</div>
<div class="right">sidebar</div>

<脚本> $('.right').insertBefore('left');

如果要为移动设备设置 o 条件，可以这样：

<脚本> var $iW = $(window).innerWidth(); if ($iW < 992){ $('.right').insertBefore('.left'); }else{ $('.right').insertAfter('.left'); }

示例 https://jsfiddle.net/w9n27k23/

---

它非常简单，以您希望在移动设备中查看的方式编写您的 html。然后使用引导顺序类，您可以安排您希望如何在桌面上查看它。

<html>
<head>
 <title>Order View</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="row">
  <div class="col order-md-2">
    <h1>IMAGE</h1>
  </div>
  <div class="col order-md-1">
    <h1>TEXT</h1>
  </div>
</body>
</html>

---