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

提问者：小点点

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

我正在做一个响应式的布局，上面有一个固定的导航条。在下面我有两个列，一个用于边栏(3)，一个用于内容（9）。桌面上的内容如下所示

Navbar
[3][9]

当我resize移动时，navbar被压缩并隐藏，则侧栏被堆叠在内容的顶部，如下所示：

Navbar
[3]
[9]

我会喜欢最上面的主要内容，所以我需要把移动上的顺序改成这样：

Navbar
[9]
[3]

我发现这篇文章涵盖了相同的观点，但接受的答案已经被编辑为解决方案“否”适用于当前版本的bootstrap。

我如何在移动上重新排序这些栏目？或者，如何将sidbar列表组放入扩展的NavBar中？

下面是我的代码：

null

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

null

共2个答案

匿名用户

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

因此更改列的顺序。

<!--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的原始问题，解决方法是使用推拉。

在Bootstrap 4中，现在可以更改顺序，即使是当列是全宽垂直堆叠时，也要感谢Bootstrap 4的FlexBox。OFC，推拉方法仍然会起作用，但现在在引导4中有其他方法可以改变列顺序，使全宽列重新排序成为可能。

方法1-对XS屏幕使用flex-column-reverse:

<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-将顺序优先用于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.codepley.com/go/bbmosvtjhd
引导程序4.1:https://www.codepley.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.codepley.com/go/wgzjxs3gel

@emre说，“你不能在小屏幕上改变列的顺序，但你可以在大屏幕上这样做”。但是，这应该澄清为声明：“您不能更改全宽”堆叠“列的顺序..”在引导程序3中。