Question

如何在引导程序中重新安排/交换某些流体容器/行的顺序.....

如果我们在后续页面上举例说明bootstrap的流体示例：

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

他们左侧有一个流动排的侧边栏，然后是同一排的英雄单位。然后是下一行的一些内容。当我们切换到移动视图/较小的屏幕时，它以相同的顺序出现。但是我们怎样才能改变这种秩序。即如何在页面顶部显示侧边栏和英雄单位？

Answer 1

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

列排序

使用.col-push-* and .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       |
----------------------------

文档： http://getbootstrap.com/css/#grid-column-ordering

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

Live demo (jsfiddle)和fullscreen（必须在正常和响应之间设置一些样式，因此样式面板中的jsfiddle“hack”）

Answer 3

如果你希望你的侧栏位于你的英雄之下但高于其他东西，那么这将需要一些dom操作，因为它不仅仅是在所有内容之前/之后放置列表的问题，而是在元素之间。这样的事情应该有效：

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

Answer 4

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

Answer 5

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

该插件要求网格保持一致，所有特定的跨度宽度，但它可能有助于此。

最好在标记渲染之前完成所有这类工作，但是在某些我无法预先排序的情况下我会使用Bootstrap，因为我不得不使用某些模板语言的限制。

Github
Codepen

Answer 6

你可以使用{3}}来完成它，CSS3提供了一种新的可能性。

使用媒体查询，您可以创建仅适用于某些类型屏幕的样式。如果你想做你正在谈论的那件事，你可以做类似的事情：

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

只有在屏幕宽度小于480px时才会应用该样式。这个解决方案实际上并不依赖于bootstrap，而是依赖于CSS3。

顺便说一句，如果你包含了bootstrap.responsive.css（也有bootstrap框架），你的布局会自动成为一个列布局，但可能不是你想要的顺序。

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

6 个答案: