Bootstrap 3: Riordina colonne impilate su schermi mobili

Question

Sto provando a creare una di quelle pagine di funzioni che Google utilizza ovunque. Su un browser desktop, si alternava tra immagine e testo (nella prima riga, è immagine e testo, una nella riga successiva è testo e immagine).

Tuttavia, sugli schermi mobili - Devo fare in modo che l'immagine preceda sempre il testo (poiché fornisce il contesto). Ecco un esempio:

Ho provato ad utilizzare le funzioni col-md-pull e col-md-push di Bootstrap per riordinarli su schermi mobili, ma non ha funzionato.

Ecco il mio codice .. Cosa sto facendo male?

<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

Si prega di fare riferimento a questo 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> 

Penso che risolverà il tuo problema.

Answer 2

riordino codice HTML all'interno del secondo .row (posizionare l'immagine qui sopra funzione due):

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

esempio Aggiornato: http://jsfiddle.net/52VtD/5839/