html - Bootstrap推拉式三列

我必须在小屏幕列中重新排列列，按以下顺序1,2,3应该在小屏幕中显示为3,1,2。

它可以与两个很好地工作，但是我不确定如何使它与具有以下结构的三列一起工作

<div class="container-fluid">
  <h1>Push and Pull</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <div class="col-md-6" style="background-color:lavender;">1</div>
    <div class="col-md-3" style="background-color:lavenderblush;">2</div>
    <div class="col-md-3" style="background-color:green;">3. This should be first one on small screen</div>
  </div>
</div>

https://codepen.io/anon/pen/zjZJRG

我尝试了几次，但是不确定是否可以在三列中使用，这破坏了设计。

最佳答案

在使用BS3时，可以使用以下HTML结构：

<div class="row">
    <div class="col-xs-12 col-md-3 pull-right">3</div>
    <div class="col-xs-12 col-md-6">1</div>
    <div class="col-xs-12 col-md-3">2</div>
</div>

演示：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <h1>Push and Pull</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <div class="col-xs-12 col-md-3 pull-right" style="background-color:green;">3. This should be first one on small screen</div>
    <div class="col-xs-12 col-md-6" style="background-color:lavender;">1</div>
    <div class="col-xs-12 col-md-3" style="background-color:lavenderblush;">2</div>
  </div>
</div>