我正在使用顶部固定的导航栏进行响应式布局。在下面，我有两列，一列用于侧栏（3），一列用于内容（9）。在桌面上看起来像这样

导航栏
[3] [9]

当我resize将其navbar压缩并隐藏时，侧边栏会堆积在内容的顶部，如下所示：

导航栏
[3]
[9]

我想要顶部的主要内容，因此我需要将移动设备的顺序更改为此：

导航栏
[9]
[3]

我发现这篇文章涵盖了相同的要点，但是对可接受的答案进行了编辑，说该解决方案不适用于当前版本的Bootstrap。

如何在移动设备上重新排列这些列？或者，如何将sidbar列表组放入正在扩展的导航栏中？

这是我的代码：

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

您不能在较小的屏幕中更改列的顺序，但可以在较大的屏幕中进行更改。

因此，更改列的顺序。

<!--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我们可以在大屏幕中对列进行重新排序，并在左侧显示侧边栏，在右侧显示主要内容。

在这里工作。

更新于2018

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

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

Bootstrap 4（alpha 6）：http : //www.codeply.com/go/bBMOsvtJhD
Bootstrap 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中更改全角 “堆栈”列的顺序..“。

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

目标

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

移动

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

平板电脑+

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

因此，标题需要直接在Tablet +上改组，从技术上来说，说明也是如此-它位于移动设备上的标题标签上方。您很快就会看到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; }
}

因此，这里的通用解决方案是添加可以在移动设备上消失的黑客标记。在Tablet +上，黑客标记允许显示的标记在流程中更早或更晚出现，然后被拉高或拉低以掩盖这些黑客标记。

注意：为了链接jsfiddle中的简单示例，我使用了固定高度，但是我正在研究的实际站点内容在所有5个标记中的高度都不同。它可以在标签高度（尤其是图像和desc）变化较大的情况下正确渲染。

注意2：根据您的布局，您可能在Tablet +（或更高的分辨率）上具有足够一致的列顺序，这样可以避免使用hack标记，margin-bottom而应改为：

注意3：这里使用的是Bootstrap3。Bootstrap4使用了不同的网格集，不适用于这些示例。

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

2017年十月

我想添加另一个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       |

你需要扭转的顺序乙然后Ç然后应用order-{breakpoint}-first到乙。并应用两种不同的设置，一种将使它们共享相同的列，而另一种将使它们采用12个列的全部宽度：

• 较小的屏幕：B到12列，C到12列

• 较大的屏幕：它们之间的总和为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

使用jQuery时，使用insertAfter（）或insertBefore（）相当容易。

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

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

这么简单

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

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

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

首先从移动版本开始，大多数时候您可以实现所需的功能。

这里的例子：

http://jsbin.com/wulexiq/edit?html,css，输出

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