使用 Bootstrap 3 重新对齐列答案

【问题标题】：Realign columns with Bootstrap 3使用 Bootstrap 3 重新对齐列
【发布时间】：2014-03-22 21:41:28
【问题描述】：

我正在编写一篇在 Bootstrap 中包含三列的文章。当我使用大屏幕时，它看起来像

但是当我使用小屏幕时，我希望它看起来像

我该怎么做？

【问题讨论】：

标签： html css twitter-bootstrap responsive-design twitter-bootstrap-3

【解决方案1】：

您必须将Column ordering 与.col-xx-push-* 和.col-xx-pull-* 类一起使用。

一个解决方案可能如下所示：

<div class="row">
  <div class="col-md-6 col-md-push-2 col-sm-12">B</div>
  <div class="col-md-2 col-md-pull-6 col-sm-6">A</div>
  <div class="col-md-4 col-sm-6">C</div>
</div>

通过更改md 和sm 来满足您的实际需求，玩转不同的断点。

上面的例子：jsbin.com/reqilege

【讨论】：

哦，好像我复制了你的答案，但我没有交叉手指。
@rockStar 我相信你......因为这是正确的解决方案，但你来晚了......对不起：/

【解决方案2】：

您需要将 push 和 b div 放入第二个中间位置，将 pull A div 放入 B div 的位置。你可以阅读更多关于列推拉的内容here

<div class="row">
  <div id="b" class="col-md-6 col-md-push-3 col-sm-12">Div B</div>
  <div id="a" class="col-md-3 col-md-pull-6 col-sm-6">Div A</div>
  <div id="c" class="col-md-3 col-sm-6 ">Div C</div>
</div>

Bootply 示例here。

【讨论】：

【解决方案3】：

这里的诀窍是按 B、A、C 的顺序排列这些框。然后将 B 偏移 A 的宽度，并使用绝对定位将 A 放置在释放的位置。

HTML

<div class="container">
    <div class="row">
        <div class="col-sm-offset-3 col-sm-6 col-xs-12">
            <h1>B</h1>
        </div>
        <div class="col-sm-3 col-xs-6 shift-me">
            <h1>A</h1>
        </div>
        <div class="col-sm-3 col-xs-6">
            <h1>C</h1>
        </div>
    </div>
</div>

CSS

.row {
    position: relative;
}
.row > div {
    border: 2px solid black;
}
.shift-me {
    position: absolute;
    top: 0;
    left: 0;
}
@media (max-width: 768px) {
    .shift-me {
        position: static;
    }
}

http://jsfiddle.net/valentin/MkbA2/

【讨论】：

不需要为此引入新的类。检查我的答案，Bootstrap 为您提供了可以实现不同顺序的类。
@Lipis 你是对的，你的解决方案要好得多，我赞成。我不知道列顺序