Bootstrap订购列问题

Question

我有三个div，我想知道如何将第三个div拉成第一个div而其他div则采用原始顺序。

以下两张图片将描述我的观点。

这是传统方式：

这是我想做的：

如何使用Bootstrap实现此布局？

Answer 1

您的商品必须在html中订购，以便在xs和sm断点处订购

查看全屏：

.item-1 {
   background: grey; 
}
  
.item-2 {
   background: green; 
}
  
.item-3 {
   background: orange; 
}

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

<div class="row">
  <div class="col-md-4 col-md-push-8">
    <div class="item item-3">Item three</div>
  </div>
  <div class="col-md-4 col-md-pull-4">
    <div class="item item-1">Item one</div>
  </div>
  <div class="col-md-4 col-md-pull-4">
    <div class="item item-2">Item two</div>
  </div>
</div>

Answer 2

您可以使用Bootstrap的Column Reordering类。遵循HTML结构将使其成为可能。

<div class="col-md-4 col-md-push-8">
    Third Div
</div>
<div class="col-md-4 col-md-pull-4">
    First Div
</div>
<div class="col-md-4 col-md-pull-4">
    Second Div
</div>

.div {
  border-radius: 10px;
  min-height: 100px;
  margin-bottom: 20px;
  padding: 20px;
  color: white;
}

.first {
  background: #7f7f7f; 
}

.second {
  background: #22b14c;
}

.third {
  background: #ff7f27;
}

<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-md-4 col-md-push-8">
      <div class="div third">
        Third Div
      </div>
    </div>
    <div class="col-md-4 col-md-pull-4">
      <div class="div first">
        First Div
      </div>
    </div>
    <div class="col-md-4 col-md-pull-4">
      <div class="div second">
        Second Div
      </div>
    </div>
  </div>
</div>

Answer 3

HTML

<div class="row">
  <div class="col-md-4 col-md-push-8 green">Item three</div>
  <div class="col-md-4 col-md-pull-4 white">Item one</div>
  <div class="col-md-4 col-md-pull-4 orange">Item two</div>
</div>

CSS

.green {
   background: green; 
}

.white {
   background: white; 
}

.orange {
   background: orange; 
}