Bootstrap：如何在流式行中更改div的顺序？

Question

如何重新排列/交换bootstrap中某些流体容器/行的顺序...

如果我们以以下页面上bootstrap的流体示例为例:

http://twitter.github.com/bootstrap/examples/fluid.html

他们在一个流体行的左侧有一个侧边栏，然后是一个英雄单元在同一行。然后在下一行中有一些内容。当我们切换到移动视图/较小的屏幕时，它以相同的顺序显示。但是我们如何更改那个顺序呢? 也就是说，如何将侧边栏显示在最后面，将英雄单元放在页面的顶部?

- mrto2

---

一个好的解决方案 https://dev59.com/O2ct5IYBdhLWcg3wQ7Qy#12227238 - byroncorrales

Answer 1

Bootstrap v3的新版本现在支持列排序：

列排序

通过 .col-push-* 和 .col-pull-* 修改器类轻松更改内置网格列的顺序。

 <div class="row">
  <div class="col-md-9 col-md-push-3">9</div>
  <div class="col-md-3 col-md-pull-9">3</div>
</div>

将按照以下顺序执行：

 ----------------------------
|     3     |      9       |
----------------------------

Documentation: http://getbootstrap.com/css/#grid-column-ordering

- George Filippakos

---

当列宽为满宽时，你该如何做呢？ col-lg-12 col-lg-12 - shaunw

这是2014年的正确答案。非常有用 - 谢谢。 - Alveoli

@shaunw 如果你喜欢的话，可以先从移动端开始。你可以在xs（12行）中正常放置它，但对于更大的桌面设备，你需要根据需要进行拉取/推送。 - user986408

Answer 2

需要记住的是，默认情况下，网格不支持此功能，但有方法可以解决。

例如，您可以反转两个跨度（设置移动视图的顺序），并通过浮动强制正常定位：

<div class="row-fluid">
    <div class="span9 pull-right">
        <!-- ... -->
    </div><!--/span-->
    <div class="span3 pull-left">
        <!-- ... -->
    </div><!--/span-->
</div><!--/row-->

然后，在较小的屏幕上，.span元素或多或少被正确地修改，但您仍然需要修复一些规则以解决此行为：

.row-fluid .pull-left[class*="span"]:last-child { margin-left: 0; }

@media (max-width: 767px) {
    .row-fluid .pull-right[class*="span"] { float: none; }
}

如果您使用超过两列，则必须反转 .pull-right 元素的边距（除最后一个元素外） - 类似于：

.row-fluid .pull-right[class*="span"] { margin-right: 2.5641%;margin-left: 0; }
.row-fluid .pull-right[class*="span"]:first-child { margin-right: 0; }

实时演示（jsfiddle）和全屏显示（某些样式必须在正常和响应之间设置，因此在样式面板中使用了jsfiddle“hack”）

- Sherbrow

---

谢谢您的回复。它达到了目的。但是如果我们在主体单元右侧有另一个侧边栏，那么如何在桌面视图中按顺序显示它们呢？因为“pull-right”会将主体单元拉到极右侧，并且将右侧侧边栏移至左侧，但我们希望主体单元位于中间，右侧边栏位于极右侧.....（http://jsfiddle.net/mrto2/YR2UM/） - mrto2

@mrto2 如果您将第二个侧边栏放置在两个带有 .pull-right 的元素之间，它应该可以工作。 - Sherbrow

它能够工作，但中心内容没有在两侧之间居中显示，而是在右侧侧边栏后面显示。两个侧边栏之间有一个空隙。如果我们不使用“pull-right”则在桌面视图下它可以正常工作，但是左侧边栏会出现在顶部... - mrto2

@mrto2 确实。我尝试了一下，但它并没有按照预期进行排序。你应该尝试嵌套一个.row-fluid，其中包含主要内容和第二个导航栏。 - Sherbrow

不得不使用旧版本的Bootstrap，这非常有用。谢谢！ - CunningFatalist

Answer 3

#wrapper {
    display: flex;
    display:-webkit-flex;
    flex-direction: column;
    -webkit-flex-direction:column;
}

#wrapper > div {
    width: 100%;
}

#header {
    order: 1;
    -webkit-order: 1;
}

#mainMenu {
    order: 2;
    -webkit-order:2;
}

#content {
    order: 3;
   -webkit-order:3;
}

#sidebar {
    order: 4;
    -webkit-order:4;
}

来源：http://www.reddit.com/r/css/comments/1v1gv7/change_order_of_divs_with_css/

- user956584

Answer 4

如果您想让侧边栏位于主体内容下方但在其他元素上方，那么这需要进行一些DOM操作，因为这不仅仅是将列表放在所有内容之前/之后的问题，而是要在元素之间插入。以下代码应该可以解决问题：

$(window).resize(function () {
    if ($(window).width() < 480) {
        $("#sidebar").insertAfter($("#hero"));
    } else {
        $("#sidebar").prepend($("#containingrow"));
    }
});

- hexist

---

漂亮的解决方案，只需在第三行加上一个闭括号即可。 - Cadell Christo

Answer 5

我正在开发一个用于对Bootstrap网格进行排序和添加元素的插件。目前它还非常粗糙和脆弱，但如果仅用于基本功能，我相信它可以在生产环境中使用。

该插件要求网格保持一致，所有元素都具有特定的跨度宽度，但它可能会对此有所帮助。

最好在标记呈现之前完成所有这些工作，但在某些情况下，我使用Bootstrap，因为我必须使用某些模板语言的限制而无法事先排序。

Github
Codepen

- rb-

Answer 6

你可以使用CSS3提供的媒体查询来实现。

通过媒体查询，你可以创建仅适用于特定屏幕类型的样式。例如，如果你想要制作你所说的那个东西，你可以这样做：

@media only screen and (max-device-width: 480px) {
      .sidebar { width: 100%; bottom: 0%; blahblah: something;  }
}

如果屏幕宽度小于480像素，那么这种样式只会应用于它。这个解决方案实际上并不依赖于 Bootstrap，而是依赖于 CSS3。

顺便说一句，如果你包含了 Bootstrap.responsive.css（也是 Bootstrap 框架中提供的），那么你的布局将自动变成单列布局，但可能不是你想要的顺序。

- bvaldivielso

---

感谢bvaldivielso的回复。 实际上我已经在不同的移动视图中使用了媒体查询，但是我想在移动视图中将顶部内容显示在底部。例如，大多数情况下，在流体页面的左侧边栏应该在移动视图中放置在主内容之后（但默认情况下它在主内容之前），所以我们必须在移动视图中将该侧边栏放置/重新排列/重新排序到该内容下面。但是当我们为桌面视图工作时，它会出现在Fluid-Row的主要内容之前...所以我正在寻找专家的意见... - mrto2