我在 Bootstrap 中使用推拉创建列，但没有工作

Question

我把这段代码用于大屏和小屏

 <div class="col-xs-6  col-lg-2">
  <div>A</div>
 </div>

<div class="col-xs-12  col-lg-8 ">
 <div>B</div>
</div>

<div class="col-xs-6 col-lg-2">
 <div>C</div>
</div>

大屏幕

|____A___|_______B_______|_____c____|

我想要这个小屏幕

|_________B___________|

|____A____|_____C____|

请提供小号

Answer 1

您可以使用 pull 和 push 响应式帮助器类来做到这一点。

由于 Bootstrap 3 是一个移动优先的框架，总是从最小的视图开始。最小视图中列的顺序应该是 html 中列的顺序，即 B、A 和 C。将 B 的大小设置为 .col-xs-12，将 A 和 C 的大小设置为 .col-xs-6。你最小的布局现在是完美的。

对于较大的布局，我使用了 md，从固定列大小开始，如 A、B 和 C 应该全部出现在单行上，它们的总和应为 12 列。由于 B 应该是 A 或 C 大小的两倍，这会导致 .col-md-6 用于 B，.col-md-3 用于 A 和 C。大布局中的列大小现在是正确的，但列 B 和 A 的顺序错误。

要修正顺序，您应该将列 A 向左移动六列，因此将 .col-md-pull-6 添加到 A。 B 列需要在 A 列之后开始，因此通过添加.col-md-push-3 将其向右移动三列。

.box {
  background-color: #f99;
  border: 1px solid #c66;
  text-align: center;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-6 col-md-push-3"><div class="box">B</div></div>
    <div class="col-xs-6 col-md-3 col-md-pull-6"><div class="box">A</div></div>
    <div class="col-xs-6 col-md-3"><div class="box">C</div></div>    
  </div>
</div>

P.S. 这种创建具有不同列顺序的响应式布局的方法在您必须将一列推或拉到另一行之前有效。由于 push 和 pull 类设置了具有position: relative 的列的left 或right 属性，这将永远不会使列换行到另一行。如果您需要此选项，则可以选择复制列及其内容并使用 visible-xs-block 之类的类以正确的布局显示它们。

Answer 2

它远非完美，但它可以解决问题：

http://jsfiddle.net/vqzLL55s/1/

<div class="container">
    <div class="col-xs-3">
        <div>A</div>
    </div>
    <div id="divB" class="col-xs-6">
        <div>B</div>
    </div>
    <div class="col-xs-3">
        <div>C</div>
    </div>
</div>