bootstrap列顺序不能在xs屏幕上工作

Question

我正在做一行2等宽列。第一个包含文本，第二个包含图像。在LG/MD/SM屏幕上的文字会留在右侧的图像，如下代码：

<div class="row"> 
    <div class="col-lg-6 col-md-6 col-sm-6"> 
     <div class="text-block"> 
      <h1>WordPress Theme Development</h1> 
      <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</h3> 
     </div> 
    </div> 
    <div class="col-lg-6 col-md-6 col-sm-6"> 
     <div class="img-block text-center"> 
      <img src="assets/pics/wordpress.png" alt="WordPress"> 
     </div> 
    </div> 
</div> 

不过XS屏幕上，我希望图像顶部和文字在底部。这就是为什么我想这下面的代码是我从here操作但是它不工作

<div class="row"> 
       <div class="col-lg-6 col-md-6 col-sm-6 col-xs-push-12"> 
        <div class="text-block"> 
         <h1>WordPress Theme Development</h1> 
         <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</h3> 
        </div> 
       </div> 
       <div class="col-lg-6 col-md-6 col-sm-6 col-xs-pull-12"> 
        <div class="img-block text-center"> 
         <img src="assets/pics/wordpress.png" alt="WordPress"> 
        </div> 
       </div> 
      </div> 

Answer 1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-lg-6 col-md-6 col-sm-6 col-md-push-6"> 
 
    <div class="img-block text-center"> 
 
     <img src="https://dummyimage.com/500x200/000/fff" alt="WordPress"> 
 
    </div> 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 col-sm-6 col-md-pull-6"> 
 
    <div class="text-block"> 
 
     <h1>WordPress Theme Development</h1> 
 
     <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</h3> 
 
    </div> 
 
    </div> 
 
</div>