Bootstrap 3: Gestapelte Spalten auf mobilen Bildschirmen neu anordnen

Question

Ich versuche, eine dieser Featureseiten zu erstellen, die Google überall verwendet. In einem Desktop-Browser würde es zwischen Bild und Text wechseln (in der ersten Zeile ist es das Bild, dann der Text; in der nächsten Zeile ist es Text und dann Bild).

Allerdings, auf mobilen Bildschirmen - muss ich sicherstellen, dass das Bild immer vor dem Text (da es Kontext bereitstellt). Hier ist eine Abbildung:

Ich versuchte, die col-md-pull und col-md-push Funktionen von Bootstrap mit ihnen auf mobilen Bildschirmen neu zu ordnen, aber es hat nicht funktioniert.

Hier ist mein Code .. Was mache ich falsch?

<div class="container"> 
    <div class="row"> 
     <div class="col-md-4"><img src="..."></div> 
     <div class="col-md-8">Feature 1 ...</div> 
    </div> 
    <div class="row"> 
     <div class="col-md-8 col-md-push-4">Feature 2 ...</div> 
     <div class="col-md-4 col-md-pull-4"><img src="..."></div> 
    </div> 
</div> 

Answer 1

Bitte auf diese jsfiddle

<div class="container"> 
<div class="row"> 
    <div class="col-md-4"> 
     <img data-src="holder.js/100px150?bg=F3C40F"> 
    </div> 
    <div class="col-md-8"> 
     <h1>Feature 1</h1> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, debitis, reiciendis, repudiandae, placeat recusandae maxime fugiat explicabo voluptatem omnis commodi molestiae assumenda repellendus. Sequi, id ducimus cumque dolore ipsum beatae?</p> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-4 col-md-push-8"> 
     <img data-src="holder.js/100px150?bg=F3C40F"> 
    </div> 
    <div class="col-md-8 col-md-pull-4"> 
     <h1>Feature 2</h1> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, voluptatum, aut, eius, ut sunt quod quia maiores eos deleniti provident delectus dicta facere eum quasi harum esse aspernatur! Quas, cumque.</p> 
    </div>  
</div> 

Ich denke, das wird Ihr Problem lösen.

Answer 2

Reorder Ihre HTML innerhalb des zweiten .row (legen Sie das Bild oben Merkmal zwei):

<div class="container"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <img src="http://lorempixel.com/200/200"> 
     </div> 
     <div class="col-md-8">Feature 1 ...</div> 
    </div> 
    <div class="row"> 
     <div class="col-md-4 col-md-push-4"> 
      <img src="http://lorempixel.com/200/200"> 
     </div> 
     <div class="col-md-8 col-md-pull-4">Feature 2</div>  
    </div> 
</div> 

Aktualisiert Beispiel: http://jsfiddle.net/52VtD/5839/