Riordinando le div in modo reattivo con Twitter Bootstrap?

Question

Sto lavorando con Twitter Bootstrap v3 e desidero riordinare gli elementi in modo reattivo, utilizzando column ordering e offsetting.

Questo è il modo in cui vorrei utilizzare i miei elementi. A -xs o -sm punti di interruzione, con il div contenente impilati 4 consecutive:

a -md o -lg punti di interruzione, con il div contenente accatastati 2 ad una riga:

Questo è il codice corrente - So come impostare le classi sul div contenente, ma non su A, B e C:

<div class="row"> 
    <div class="containing col-xs-6 col-sm-6 col-md-3 col-lg-3"> 
     <div class="row"> 
     <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of A</div> 
     <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of B</div> 
     <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of C</div> 
     </div> 
    </div> 
    ... more containing divs... 
    </div> 

Non riesco a capire come ottenere A, B e C nell'ordine corretto con Bootstrap 3 column ordering e offsetting. È effettivamente possibile?

Questo è quanto ho utilizzando JSFiddle: http://jsfiddle.net/3vYgR/

Answer 1

Penso che si desidera guardare le classi push e pull ...

<div class="row"> 
    <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of A</div> 
    <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-pull-6 col-md-pull-6">Content of B</div> 
    <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of C</div> 
</div> 

Demo: http://bootply.com/77853

Answer 2

Qual è il motivo per non utilizzare metodi più tradizionali su questo, vale a dire. fluttante B a sinistra e gli altri elementi a destra?

Come se si aggiunge questo alla corrente CSS nel vostro jsfiddle:

.b { 
    float: left; 
    width: 50%; 
    height: 100px; 
} 
.a, .c { 
    float: right; 
    width: 50%; 
    height: 50px; 
} 

Vedi http://jsfiddle.net/E6BFk/

io non sono sicuro che l'ordinazione colonna di Sputafuoco potrebbe ottenere l'effetto di sovrapposizione, forse solo il riordino ... Anche se la documentazione è piuttosto sottile su quella caratteristica.

Answer 3

Ho provato il push/pull, come indicato nella risposta da Skelly, ma finisce per C in una nuova riga una volta applicate altezze: http://www.bootply.com/Q3djHYawgb#

Se B può essere mostrato per primo quando mostrato in dimensioni ridotte, allora penso che abbia più senso creare una riga all'interno della colonna di destra per contenere A e C:

<div class="containing row"> 
    <div class="b col-xs-12 col-md-6">Content of B</div> 
    <div class="ac col-xs-12 col-md-6"> 
     <div class="row"> 
      <div class="a col-xs-12">Content of A</div> 
     </div> 
     <div class="row"> 
      <div class="c col-xs-12">Content of C</div> 
     </div> 
    </div> 
</div> 

Vedi http://jsfiddle.net/hoodoo99/L2BE9/

Answer 4

La risposta fornita da @skelly è ottimo punto di partenza, ma non causare alcuni problemi di allineamento verticale. Immaginate Un è un div alto, quindi C viene allineata verticalmente al di sotto A .:

[A] [B] 
[ ] 
    [C] 

Inoltre, se si vuole prendere un passo ulteriore potrebbe anche essere necessario considerare l'utilizzo di clearfix blocchi.Per esempio;

<!-- Add clearfix for only the required viewport(s) --> 
<div class="clearfix visible-md-block visible-lg-block"></div> 

Senza clearfixmd o lg potrebbe finire come:

[A] [B] 
    [C] [D] 

Ciò è particolarmente importante se si desidera più di 2 elementi nella "colonna" finale, o le altezze degli elementi iniziare a gettare altri elementi fuori allineamento.

Con il clearfixmd o lg sarebbe:

[A] [B] 
    [C] 
    [D] 

Esempio violino: http://jsfiddle.net/L5174o8d/