使用Bootstrap反转小尺寸的col

Question

以下是代码：

<div class = "container">
    <div class = "row">
        <div class = "col-md-6">hi 1</div>
        <div class = "col-md-6>hi 2</div>
    </div>
</div>

因此，它显示：hi 1 | hi 2

并在xs（小屏幕）中我希望它显示：

 hi 2
 hi 1

我该怎么做？

Answer 1

请记住规则＆＃34; 首先移动＆＃34;

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

Bootply Demo

Answer 2

在源代码中，按照您想要的较小视口的顺序，在您选择的最小宽度（sm，md，lg）中使用推拉类。

DEMO：http://jsbin.com/nexax/1/edit

 <div class="container">

    <div class="row">

      <div class="col-sm-6 col-sm-push-6">
        hi 2
      </div>

      <div class="col-sm-6 col-sm-pull-6">
        hi 1
      </div>

      </div><!--/.row-->    

  </div><!--/.container-->

Answer 3

真的很简单，下面是以下代码：

<div class="container">
    <div class="row">
        <div class="col-md-6 col-xs-12">hi 1</div>
        <div class="col-md-6 col-xs-12">hi 2</div>
    </div>
</div>