列重新排序引導

Question

這是它應該怎麼看，但我只是無法弄清楚如何做到這一點：

大屏幕：

[圖片] [文] [空白] [空白]

平板電腦/手機：

[空白] [文] [空白]
[....................圖片... ..................]

   <div class="row"> 
       <div class="col-xs-4 col-sm-push-4"style="background-color:blue;"> 
        <p>Text</p> 
       </div> 
       <div class="col-lg-2 col-lg-push-4 col-xs-pull-4"style="background-color:green; height:200px;"></div> 
        <div class="col-lg-2 col-lg-push-4 col-xs-pull-4"style="background-color:yellow; height:200px;"></div> 
         <div class="col-md-4 col-md-pull-8"style="background-color:red;"> 
        <div class="picture"></div> 
       </div>     
      </div> 

Answer 1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="row"> 
 
    
 
    <div class="col-xs-4 col-xs-push-4" style="background-color:blue;"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehe</p> 
 

 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitaborum</p> 
 
    </div> 
 
    
 
    <div class="col-lg-2 col-lg-push-4 col-xs-pull-4 col-xs-4" style="background-color:green; height:200px;">Empty</div> 
 
    
 
    <div class="col-lg-2 col-lg-push-4 col-xs-4" style="background-color:yellow; height:200px;">Empty</div> 
 
    
 
    <div class="col-lg-4 col-lg-pull-8 col-xs-12" style="background-color:red;"> 
 
    <div class="picture">Picture</div> 
 
    </div> 
 

 
</div>