Ordinamento colonne in Bootstrap 4

Question

Ho 3 colonne che voglio ordinare in modi diversi su desktop e mobile. Attualmente, il mio cingerà assomiglia a questo:

<div class="row"> 
 
\t <div class="col-xs-3 col-md-6"> 
 
\t \t 1 
 
\t </div> 
 
\t <div class="col-xs-3 col-md-6"> 
 
\t \t 2 
 
\t </div> 
 
\t <div class="col-xs-6 col-md-12"> 
 
\t \t 3 
 
\t </div> 
 
</div>

Nella vista cellulare voglio avere il seguente ordine:

1-3-2

Purtroppo don ottenere come risolvere questo con le classi .col-md-push- * e .col-md-pull- * in Bootstrap 4.

Answer 1

Rivisitare questa domanda con l'ultima Bootstrap 4.0.0 (stabile).

Il reattivo ordering classes sono ora order-first, order-last e order-0 - order-12

Bootstrap 4 spinta trazione classi sono ora push-{viewport}-{units} e pull-{viewport}-{units} e l'infisso xs- è stato rimosso. Per ottenere il layout desiderato 1-3-2 sul mobile/xs sarebbero: Bootstrap 4 push pull demo

---

Dal Bootstrap 4 è FlexBox, è facile cambiare l'ordine delle colonne. I cols possono essere ordinati da order-1 a order-12, in modo reattivo come order-md-12 order-2 (ultimo su md, secondo su xs) relativo al genitore .row.

<div class="container"> 
    <div class="row"> 
     <div class="col-3 col-md-6"> 
      <div class="card card-body">1</div> 
     </div> 
     <div class="col-6 col-md-12 order-2 order-md-12"> 
      <div class="card card-body">3</div> 
     </div> 
     <div class="col-3 col-md-6 order-3"> 
      <div class="card card-body">2</div> 
     </div> 
    </div> 
</div> 

2018 Aggiornamento Bootstrap 4.0.0
Col ordering demo

desktop (schermi più grandi):

Mobile (schermi più piccoli):

vecchia versione demo
demo - alpha 6
demo - beta (3)

See more Bootstrap 4.0.0 ordering demos

---

correlati:
Column ordering in Bootstrap 4 with push/pull and col-md-12
Bootstrap 4 change order of columns

Answer 2

Puoi fare due diversi container uno con ordine mobile e nasconderlo sullo schermo del desktop, un altro con ordine desktop e nasconderlo sullo schermo mobile

Answer 3

Sto usando Bootstrap 3, quindi non so se c'è un modo più semplice per do it Bootstrap 4, ma questo css dovrebbe funzionare per voi:

.pull-right-xs { 
    float: right; 
} 

@media (min-width: 768px) { 
    .pull-right-xs { 
     float: left; 
    } 
} 

... e aggiungere classe alla seconda colonna:

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

EDIT:

Ohh ... sembra che quello che ho scritto sopra sia esattamente un. pull-xs-right Classe in Bootstrap 4: X Basta aggiungerla alla seconda colonna e dovrebbe funzionare perfettamente.

Answer 4

Dal colonna-ordinamento non funziona in Bootstrap 4 beta come descritto nel codice fornito nella risposta rivisitato sopra, si sarebbe è necessario utilizzare quanto segue (come indicato nel codeply 4 demo ordine Flexbox - collegamenti alfa/beta forniti nella risposta).

<div class="container"> 
<div class="row"> 
    <div class="col-3 col-md-6"> 
     <div class="card card-block">1</div> 
    </div> 
    <div class="col-6 col-md-12 flex-md-last"> 
     <div class="card card-block">3</div> 
    </div> 
    <div class="col-3 col-md-6 "> 
     <div class="card card-block">2</div> 
    </div> 
</div> 

Nota tuttavia che la "Flexbox ordine demo - beta" va a una base di codice alfa, e la modifica della base di codice a Beta (ed eseguirlo) risultati nei div che mostrano in modo non corretto in una singola colonna - ma questo aspetto come un problema di codeply poiché tagliare e incollare il codice di codeply funziona come descritto.

Answer 5

Questo può essere ottenuto anche con la proprietà CSS "Ordine" e una query multimediale.

Qualcosa di simile a questo:

@media only screen and (max-width: 768px) { 
    #first { 
     order: 2; 
    } 
    #second { 
     order: 4; 
    } 
    #third { 
     order: 1; 
    } 
    #fourth { 
     order: 3; 
    } 
} 

CodePen Link: https://codepen.io/preston206/pen/EwrXqm