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>