带的小尺寸倒装

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

在源中，将其按您想要的较小视口的顺序，在您选择的最小宽度(sm、md、lg)中使用push和pull类。

​

​

​

​

演示：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 2

记住"mobile “规则

<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 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>