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

Question

我正在制作带有顶部固定导航栏的响应式布局。在下面我有两列，一列用于侧边栏 (3)，另一列用于内容 (9)。在桌面上看起来像这样

导航栏
[3][9]

当我将resize 移动到移动时，navbar 被压缩并隐藏，然后侧边栏堆叠在内容之上，如下所示：

导航栏
[3]
[9]

我想要顶部的主要内容，所以我需要将移动端的顺序更改为：

导航栏
[9]
[3]

我发现 this article 涵盖了相同的点，但已接受的答案已被编辑为该解决方案不适用于当前版本的 Bootstrap。

如何在移动设备上重新排列这些列？或者，我怎样才能让 sidbar 列表组进入我的扩展导航栏？

这是我的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <a href="#" class="navbar-brand">Brand Title</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse navHeaderCollapse">

    <ul class="nav navbar-nav navbar-right"><!--original navbar-->
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">FAQ</a></li>
    </ul>

    </div>
  </div>
</div><!--End Navbar Div-->
    <div class="container">
  <div class="row">

    <div class="col-lg-3">
  <div class="list-group">
    <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Lorem ipsum</h4>
    <p class="list-group-item-text">Lorem Ipsum is simply dummy text.</p></a>
  </div>
</div><!--end sidebar-->


<div class="col-lg-9">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="page-header">
     Main Content
    </div>
  </div>
</div><!--end main content area-->

Answer 1

引导 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 个标签中的高度各不相同。它在标签高度变化相对较大的情况下正确渲染，尤其是图像和描述。

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

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

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

Answer 2

使用 jQuery 使用 insertAfter() 或 insertBefore() 这很容易：

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

<script>
$('.right').insertBefore('left');
</script>

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

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

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

Answer 3

2018 年更新

对于基于Bootstrap 3的原始问题，解决方案是使用push-pull。

在 Bootstrap 4 中，现在可以更改顺序，即使列是全宽堆叠，这要感谢 Bootstrap 4弹性盒。 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) 宽度上的自然顺序。 （A-B 与 B-A 相反）。

<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 中更改 全宽“堆叠”列..的顺序。

Answer 4

在 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

Answer 5

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，可以定位导航栏、侧边栏和内容，然后在媒体查询中应用排序属性。

Answer 6

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

这里的例子：

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>

Answer 7

您无法在小屏幕中更改列的顺序，但您可以在大屏幕中更改。

所以改变你的列的顺序。

<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>

<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>

默认情况下，这首先显示主要内容。

所以在移动端首先显示主要内容。

通过使用col-lg-push 和col-lg-pull，我们可以在大屏幕中重新排列列，并在左侧显示侧边栏，在右侧显示主要内容。

工作fiddle here。