yeniden sıralama kolonlar

Question

Önyükleme Bu onun bakmak gerekiyordu ama nasıl gerçekleşmesi için nasıl kendimi alamıyorum figür dışarı:

büyük ekran:

[resim] [metin] [boşluk] [boşluk]

tablet/telefon:

[boşluk] [metin] [boşluk]
[.................... resim ... ..................]

   <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>