使用Bootstrap 3重新排列列

Question

我正在使用Bootstrap中的三列编写一篇文章。当我使用大屏幕时，它似乎是

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

我该怎么做？

Answer 1

您必须使用.col-xx-push-*和.col-xx-pull-*类{/ 3}}。

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

<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以符合您的实际需求来玩不同的突破点。

以上示例实际操作：Column ordering

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

Answer 3

这里的诀窍是按B，A，C顺序排列方框。然后你用B的宽度偏移B，并使用绝对定位将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/