如何在移动布局上更改Bootstrap 3列顺序？-Java 学习之路

240

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

navbar [3] [9]

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

navbar [3] [9]

我想在顶部的主要内容，所以我需要将移动订单更改为：

navbar [9] [3]

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

如何在移动设备上重新排序这些列？或者，我怎样才能将sidbar list-group放入我的扩展导航栏？

这是我的代码：

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

7 回答

31
您无法在较小的屏幕中更改列的顺序，但您可以在大屏幕中执行此操作 .

因此，请更改列的顺序 .
```

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


<div class="col-lg-3 col-lg-pull-9">
</div>
```
默认情况下，它首先显示主要内容 .

所以在移动主要内容中首先显示 .

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

工作fiddle here .
回复于 2024-04-27T07:18:19+08:00
25
Updated 2018

对于基于 Bootstrap 3 的原始问题，解决方案是 use push-pull .

在 Bootstrap 4 中，由于Bootstrap 4 flexbox，现在可以垂直更改顺序 even when the columns are full-width stacked . 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

Original 3.x Answer

对于基于 Bootstrap 3 的原始问题，对于较大的宽度，解决方案是 use push-pull ，然后列将显示它们在较小（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>
```
Bootstrap 3：http://www.codeply.com/go/wgzJXs3gel

@emre说，“你不能改变较小屏幕中列的顺序，但是你可以在大屏幕中这样做". However, this should be clarified to state: "你无法在Bootstrap 3中改变 full-width "stacked" columns ..的顺序 . ”
回复于 2024-04-27T07:18:19+08:00
1
这里的答案仅适用于2个单元格，但只要这些列中有更多单元格，就会导致更复杂的问题 . 我想我已经为多列中的任意数量的单元格找到了一个通用的解决方案 .

目标

在移动设备上获取垂直标签序列，以按照设计在平板电脑/台式机上所要求的顺序排列自己 . 在这个具体的例子中，一个标签必须比通常更早地输入流量，而另一个标签必须比通常更早 .

移动
```
[1 headline]
[2 image]
[3 qty]
[4 caption]
[5 desc]
```
平板电脑
```
[2 image  ][1 headline]
[         ][3 qty     ]
[         ][5 desc    ]
[4 caption][          ]
[         ][          ]
```
所以 Headers 需要在平板电脑上随机播放，技术上，desc也是如此 - 它位于移动设备之前的 Headers 标签之上 . 你会在一瞬间看到4个 Headers 也有问题 .

让我们假设每个单元格的高度都有所不同，并且需要在下一个单元格中从上到下齐平（排除像 table 一样的弱技巧） .

与所有Bootstrap网格问题一样，步骤1是在页面上实现HTML必须是移动顺序，1 2 3 4 5 . 然后，确定如何让平板电脑/桌面以这种方式重新排序 - 理想情况下没有Javascript .

让 1 headline 和 3 qty 坐在右边而不是左边的解决方案就是简单地将它们设置为 pull-right . 这适用于CSS float: right ，这意味着他们找到了第一个开放空间，它们按以下顺序工作：1处于右上角 . 2是下一个并且是常规的（ float: left ），因此它会进入左上角 . 然后是3，这是 float: right 所以它跳过1下方 .

但这个解决方案还不够 4 caption ;因为左边的2个单元格很短，所以左边的单元格往往比它们两个结合的时间长 . Bootstrap Grid是一个美化的浮动黑客，意思是 4 caption 是 float: left . 由于 2 image 占据了左侧的大量空间， 4 caption 试图适应下一个可用空间 - 通常是右侧列，而不是我们想要的左侧 .

这里的解决方案（更常见的是这样的任何问题）是添加一个隐藏在移动设备上的黑客标签，它存在于平板电脑上以推出 Headers ，然后被负边距覆盖 - 如下所示：
```
[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; }
}
```
所以，这里的通用解决方案是添加黑客标签可以在移动设备上消失 . 在平板电脑上，黑客标签允许显示的标签在流程中更早或更晚出现，然后上拉或下拉以覆盖那些黑客标签 .

Note: 为了链接jsfiddle中的简单示例，我使用了固定高度，但我正在处理的实际网站内容在所有5个标签中的高度不同 . 它适当地呈现标签高度的相对较大的变化，尤其是图像和desc .

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

Note 3: 这使用Bootstrap 3. Bootstrap 4使用不同的网格集，不适用于这些示例 .

http://jsfiddle.net/b9chris/52VtD/16632/
回复于 2024-04-27T07:18:19+08:00
-2
October 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 Link: https://codepen.io/preston206/pen/EwrXqm

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

我将这与原始海报的问题联系起来 . 使用CSS，可以定位导航栏，侧边栏和内容，然后在媒体查询中应用订单属性 .
回复于 2024-04-27T07:18:19+08:00

427

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

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

您需要反转 B 然后 C 的顺序，然后将 order-{breakpoint}-first 应用于 B . 并应用两个不同的设置，一个将使它们共享相同的cols，另一个将使它们占据12个cols的整个宽度：

较小的屏幕：12个cols到 B 和12个cols到 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>

Demo: https://codepen.io/anon/pen/wXLGKa

回复于 2024-04-27T07:18:19+08:00

首先从移动版开始，您可以在大多数情况下实现您想要的功能 .

这里的例子：

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>

回复于 2024-04-27T07:18:19+08:00

3
使用insertAfter（）或insertBefore（）的jQuery非常容易 .

<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/
回复于 2024-04-27T07:18:19+08:00

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

7 回答

目标

移动

平板电脑

相关问题