水平对齐然后在引导程序中堆叠列

Question

How can I horizontally align two columns at col-sm but stack them vertically at col-xs?

I currently have:

<div class="col-md-3 col-sm-12"> 
    <div class="row"> 
         <div class="col-xs-12 col-sm-6 col-md-12">Content</div> 
    </div> 
    <div class="row"> 
        <div class="col-xs-12 col-sm-6 col-md-12">Content</div> 
    </div> 
</div>

Answer 1

Something like

<div class="row">
  <div class="col-sm-6 col-xs-12">Content</div>
  <div class="col-sm-6 col-xs-12">Content</div>
</div>

Bootply : http://www.bootply.com/u6mMtQvyzX

For Claire :

You don't need this row divs...

<div class="col-md-3 col-sm-12"> 
    <!-- <div class="row"> -->     
         <div class="col-xs-12 col-sm-6 col-md-12">Content</div> 
    <!-- </div> -->  
    <!-- <div class="row">  -->  
        <div class="col-xs-12 col-sm-6 col-md-12">Content</div> 
    <!--  </div>   -->   
</div>