HTML - 重新排序 Bootstrap 列

Question

我有三个 div，如下图所示:

如何使用 Bootstrap-3 实现所需的布局？

HTML:

 <div class="row">
     <div class="col-md-5" col-md-push-7>
        <div>1</div>
        <div>3</div>
     <div>
     <div class="col-md-7" col-md-push-5>
        <div>2</div>
     </div>
  </div>

Answer 1

使用下面的代码结构来实现这个布局:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-7 pull-right">1</div>
    <div class="col-xs-12 col-sm-5">2</div>
    <div class="col-xs-12 col-sm-7 pull-right">3</div>
  </div>
</div>

.box {
  border: 2px solid black;
  margin-bottom: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-7 pull-right">
      <div class="box">1</div>
    </div>
    <div class="col-xs-12 col-sm-5">
      <div class="box box2">2</div>
    </div>
    <div class="col-xs-12 col-sm-7 pull-right">
      <div class="box">3</div>
    </div>
  </div>
</div>