列重新排序引导

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>