Riordino con bootstrap 3

Question

Qualcuno mi può aiutare con il codice html per riordinare le colonne di seguito utilizzando bootstrap 3:

----- ----- ----- 
| 1 | 2 | 3 | 
----- ----- ----- 

A tal:

----- 
| 2 | 
----- 
| 1 | 
----- 
| 3 | 
----- 

So che questo ha qualcosa a che fare con push/pull Non riesco a farlo bene.

Modifica

E il codice som che non posso andare al lavoro:

<div class="row"> 
    <div class="col-md-8 col-xs-12">2</div> 
    <div class="col-md-2 col-xs-12 col-md-push-2">1</div> 
    <div class="col-md-8 col-xs-12 col-md-pull-2">3</div> 
</div> 

Il cellulare si guarda bene, ma non sul desktop.

Soluzione

<div class="row"> 
    <div class="col-md-8 col-xs-12 col-md-push-2">2</div> 
    <div class="col-md-2 col-xs-12 col-md-pull-8">1</div> 
    <div class="col-md-8 col-xs-12">3</div> 
</div> 

Answer 1

Questo è piuttosto semplice, essi punto chiave è che non siamo in grado di riordinare le colonne in modalità mobile. Dovremmo pensare ad esso come primo cellulare, poi riordinare le colonne su schermi più grandi usando .col-*-push-#, classi .col-*-pull-# helper:

.red { 
 
    background: red; 
 
} 
 
.blue { 
 
    background: blue; 
 
} 
 
.green { 
 
    background: green; 
 
}

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="red col-sm-4 col-sm-push-4">2</div> 
 
     <div class="green col-sm-4 col-sm-pull-4">1</div> 
 
     <div class="blue col-sm-4">3</div> 
 
    </div> 
 
</div>

Answer 2

utilizzare una classe personalizzata per ogni e utilizzare il concetto di dialogo CSS flex.

HTML

<div class="row"> 
    <div class="col-md-4 one">First box</div> 
    <div class="col-md-4 two">Second Box</div> 
    <div class="col-md-4 three">Third Box</div> 
</div> 

CSS

.row { 
    display: flex; 
    flex-direction: column; 
} 

.one { 
    order: 2; 
} 

.two { 
    order: 1; 
} 

.three { 
    order: 3; 
} 

Codeply