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

How do I change Bootstrap 3 column order on mobile layout?

提问by user3000310

I'm making a responsive layout with a top fixed navbar. Underneath I have two columns, one for a sidebar (3), and one for content (9). Which on desktop looks like this

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

navbar
[3][9]

导航栏
[3][9]

When I resizeto mobile the navbaris compressed and hidden, then the sidebar is stacked on top of the content, like this:

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

navbar
[3]
[9]

导航栏
[3]
[9]

I would like the main content at the top, so I need to change the order on mobile to this:

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

navbar
[9]
[3]

导航栏
[9]
[3]

I found this articlewhich covers the same points, but the accepted answer has been edited to say that the solution no applies to the current version of Bootstrap.

我发现这篇文章涵盖了相同的观点，但已接受的答案已被编辑为说明该解决方案不适用于当前版本的 Bootstrap。

How can I reorder these columns on mobile? Or alternatively, how can I get the sidbar list-group into my expanding navbar?

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

Here is my code:

这是我的代码：

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

回答by emre nevayeshirazi

You cannot change the order of columns in smaller screens but you can do that in large screens.

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

So change the order of your columns.

所以改变你的列的顺序。

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

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

By default this displays the main content first.

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

So in mobile main content is displayed first.

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

By using col-lg-pushand col-lg-pullwe can reorder the columns in large screens and display sidebar on the left and main content on the right.

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

Working fiddle here.

在这里工作小提琴。

回答by Zim

Updated 2018

2018 年更新

For the originalquestion based on Bootstrap 3, the solution was to use push-pull.

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

In Bootstrap 4it's now possibleto change the order, even when the columns are full-width stackedvertically, thanks to Bootstrap 4 flexbox. OFC, the push pull method will still work, but now there are other ways to change column order in Bootstrap 4, making it possible to re-order full-width columns.

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

Method 1 - Use flex-column-reversefor xsscreens:

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

Method 2 - Use order-firstfor xsscreens:

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

Bootstrap 4（alpha 6）：http: //www.codeply.com/go/bBMOsvtJhD
Bootstrap 4.1：https: //www.codeply.com/go/e0v77yGtcr

---

---

Original 3.x Answer

原始 3.x 答案

For the originalquestion based on Bootstrap 3, the solution was to use push-pullfor the larger widths, and then the columns will show is their natural order on smaller (xs) widths. (A-B reverse to B-A).

对于基于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>

Bootstrap 3: http://www.codeply.com/go/wgzJXs3gel

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

@emre stated, "You cannot change the order of columns in smaller screens but you can do that in large screens". However, this should be clarified to state: "You cannot change the order of full-width"stacked" columns.." in Bootstrap 3.

@emre 表示，“您无法在较小的屏幕中更改列的顺序，但可以在大屏幕中进行更改”。但是，应该澄清这一点：“您不能在 Bootstrap 3 中更改全角“堆叠”列的顺序..”。

回答by Chris Moschini

The answers here work for just 2 cells, but as soon as those columns have more in them it can lead to a bit more complexity. I think I've found a generalized solution for any number of cells in multiple columns.

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

Goals

目标

Get a vertical sequence of tags on mobile to arrange themselves in whatever order the design calls for on tablet/desktop. In this concrete example, one tag must enter flow earlier than it normally would, and another later than it normally would.

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

Mobile

移动的

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

Tablet+

平板+

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

So headline needs to shuffle right on tablet+, and technically, so does desc - it sits above the caption tag that precedes it on mobile. You'll see in a moment 4 caption is in trouble too.

因此，标题需要在平板电脑+ 上正确排列，从技术上讲， desc 也是如此 - 它位于移动设备上位于它前面的标题标签上方。稍后您会看到 4 字幕也有问题。

Let's assume every cell could vary in height, and needs to be flush top-to-bottom with its next cell (ruling out weak tricks like a table).

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

As with all Bootstrap Grid problems step 1 is to realize the HTML has to be in mobile-order, 1 2 3 4 5, on the page. Then, determine how to get tablet/desktop to reorder itself in this way - ideally without Javascript.

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

The solution to get 1 headlineand 3 qtyto sit to the right not the left is to simply set them both pull-right. This applies CSS float: right, meaning they find the first open space they'll fit to the right. You can think of the browser's CSS processor working in the following order: 1 fits in to the right top corner. 2 is next and is regular (float: left), so it goes to top-left corner. Then 3, which is float: rightso it leaps over underneath 1.

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

But this solution wasn't enough for 4 caption; because the right 2 cells are so short 2 imageon the left tends to be longer than the both of them combined. Bootstrap Grid is a glorified float hack, meaning 4 captionis float: left. With 2 imageoccupying so much room on the left, 4 captionattempts to fit in the next available space - often the right column, not the left where we wanted it.

但是这个解决方案还不够4 caption；因为右边的 2 个单元格太短2 image了，左边的往往比它们两个加起来都要长。Bootstrap Grid 是一个光荣的浮动 hack，意思4 caption是float: left. 由于2 image在左侧占据了如此多的空间，因此4 caption尝试适应下一个可用空间 - 通常是右侧的列，而不是我们想要的左侧。

The solution here (and more generally for any issue like this) was to add a hack tag, hidden on mobile, that exists on tablet+ to push caption out, that then gets covered up by a negative margin - like this:

这里的解决方案（更一般地针对任何此类问题）是添加一个隐藏在移动设备上的hack标签，该标签存在于平板电脑+上以将字幕推出，然后被负边距覆盖 - 如下所示：

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

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

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

HTML:

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:

CSS：

#hack { height: 50px; }

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

So, the generalized solution here is to add hack tags that can disappear on mobile. On tablet+ the hack tags allow displayed tags to appear earlier or later in the flow, then get pulled up or down to cover up those hack tags.

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

Note:I've used fixed heights for the sake of the simple example in the linked jsfiddle, but the actual site content I was working on varies in height in all 5 tags. It renders properly with relatively large variance in tag heights, especially image and desc.

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

Note 2:Depending on your layout, you may have a consistent enough column order on tablet+ (or larger resolutions), that you can avoid use of hack tags, using margin-bottominstead, like so:

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

Note 3:This uses Bootstrap 3. Bootstrap 4 uses a different grid set, and won't work with these examples.

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

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

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

回答by bprdev

October 2017

2017 年 10 月

I would like to add another Bootstrap 4 solution. One that worked for me.

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

The CSS "Order" property, combined with a media query, can be used to re-order columns when they get stacked in smaller screens.

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

Something like this:

像这样的东西：

@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

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

Adjust the screen size and you'll see the columns get stacked in a different order.

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

I'll tie this in with the original poster's question. With CSS, the navbar, sidebar, and content can be targeted and then order properties applied within a media query.

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

回答by ajax333221

In Bootstrap 4, if you want to do something like this:

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

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

You need to reverse the order of Bthen Cthen apply order-{breakpoint}-firstto B. And apply two different settings, one that will make them share the same cols and other that will make them take the full width of the 12 cols:

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

• Smaller screens: 12 cols to Band 12 cols to C

• Larger screens: 12 cols between the sum of them (B+ C= 12)

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

• 更大的屏幕：它们的总和之间有 12 列（B+ C= 12）

Like this

像这样

<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

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

回答by Nicola Mihaita

This is quite easy with jQuery using insertAfter() or insertBefore().

这对于使用 insertAfter() 或 insertBefore() 的 jQuery 非常容易。

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

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

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

That simple

就那么简单

if you want to to set o condition for mobile devices you can make it like this

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

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

example https://jsfiddle.net/w9n27k23/

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

回答by user2866893

Starting with the mobile version first, you can achieve what you want, most of the time.

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

Examples here:

这里的例子：

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

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>