Bootstrap列布局和排序（推/拉？）

Question

我正在尝试使用bootstrap布局网页，其中两列包含各种高度的元素。

当高于sm时，我想布局如下两列：

当a和b位于c单独的同一div中时，

很容易

但是当sm及以下时，我希望div c在a和b之间转移：

a c和b按此顺序

时，

很容易

注意：b应位于a正下方， NOT 会受c高度的影响。由于div是不同的高度，当div b为short而div a很长时，我无法对div c进行对齐。

Answer 1

只需在中间块上添加pull-right类。遵循HTML结构将使其成为可能。

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6">
      ...
    </div>
    <div class="col-xs-12 col-sm-6 pull-right">
      ...
    </div>
    <div class="col-xs-12 col-sm-6">
      ...
    </div>
  </div>
</div>

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.red {
  margin-bottom: 20px;
  background: red;
  height: 50px;
}

.green {
  margin-bottom: 15px;
  background: green;
  height: 100px;
}

.yellow {
  background: #ffa500;
  height: 150px;
}

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6">
      <div class="red">a</div>
    </div>
    <div class="col-xs-12 col-sm-6 pull-right">
      <div class="green">c</div>
    </div>
    <div class="col-xs-12 col-sm-6">
      <div class="yellow">b</div>
    </div>
  </div>
</div>

Answer 2

您可以使用绝对定位，使用媒体查询以您希望的屏幕尺寸向右“拉”C

JSFIDDLE

<强> HTML

<div class="row">
    <div class="col-xs-12 col-sm-6">
      <div id="divA">A</div>
      <div id="divC">C</div>
      <div id="divB">B</div>
    </div>
</div>

<强> CSS

#divA,
#divB,
#divC{
  padding:20px;
  color:white;
  margin-bottom:5px;
  width:100%;
}

#divA{
  background:red;
}

#divB{
  background:orange;
}

#divC{
  background: green;
}


@media (min-width: 768px) {
  #divC{
    position:absolute;
    top:0;
    left:100%;
  }
}