Modificare l'ordine di col - * - 12 colonne in Bootstrap 3 utilizzando push/pull

Question

Ho due colonne della stessa dimensione (.col-xs-12) e cambierei la loro posizione quando le dimensioni dello schermo corrispondono a quelle di un dispositivo mobile. Li posizionerei nell'ordine inverso.

Ho letto che le direttive pushstrap e bootstrap aiutano a farlo, ma è possibile cambiare il posto di due colonne della stessa dimensione con le seguenti classi?

div.col-xs-12.col-xs-push-12 
    p test1 
div.col-xs-12.col-xs-pull-12 
    p test2 

Answer 1

È possibile totalmente farlo, vedi Bootstrap's Grid Column Ordering

Ma, naturalmente, il tuo esempio non avrà alcun effetto in quanto XS-12 è una colonna di larghezza, quindi questo sarà valido solo per i modelli in cui la somma del colonne è 12 (o se 16 o qualsiasi altra cosa se si personalizza la griglia di Bootstrap). Vedere l'esempio Bootstrap sulla stessa pagina a scopo illustrativo:

<div class="row"> 
    <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> 
    <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> 
</div> 

Answer 2

In realtà non si può riordinare le colonne che hanno .col-*-12 da push/pull classi di supporto. La somma delle colonne supera le colonne predefinite 12 definite da .

Si potrebbe o modificare l'ordine delle colonne in HTML e quindi utilizzare le classi di ordinazione su schermi più grandi come segue:

EXAMPLE HERE

<div class="row"> 
    <div class="col-xs-12 col-sm-6 col-sm-push-6"> 
    <p>test2</p> 
    </div> 

    <div class="col-xs-12 col-sm-6 col-sm-pull-6"> 
    <p>test1</p> 
    </div> 
</div> 

Oppure utilizzare this fancy approach per invertire l'ordine di le colonne posizionate verticalmente una sotto l'altra:

EXAMPLE HERE

@media (max-width: 767px) { 
    .row.reorder-xs { 
    transform: rotate(180deg); 
    direction: rtl; /* Fix the horizontal alignment */ 
    } 

    .row.reorder-xs > [class*="col-"] { 
    transform: rotate(-180deg); 
    direction: ltr; /* Fix the horizontal alignment */ 
    } 
} 

Vale la pena notare che i CSS trasforma are supported in IE9 pure; Basta non dimenticare di aggiungere i prefissi dei fornitori.

Answer 3

Se è necessario riordinare colli per un caso reattivo come

div.col-xs-12.col-sm-9 # this should be on the bottom for col-xs-12 
    p test1 
div.col-xs-12.col-sm-3 # this should be on the top for col-xs-12 
    p test2 

si potrebbe utilizzare una classe .pull-right e invertire l'ordine delle colonne.

div.col-xs-12.col-sm-3.pull-right 
    p test2 
div.col-xs-12.col-sm-9 
    p test1 

allora sono in ordine per col-xs-12 e appaiono correttamente per gli altri punti di interruzione.

Answer 4

Nel caso in cui qualcuno venga qui con un problema simile a me, solo trovare push/pull non soddisfa le tue esigenze, perché col-xs-12 non tira/spinge o usa più di 2 colonne rende più difficile da capire i valori push/pull qui sono la mia soluzione.

Sotto è la soluzione elegante con @hashemquolami

@media (max-width: 767px) { 
.row.reorder-xs { 
    transform: rotate(180deg); 
    direction: rtl; /* Fix the horizontal alignment */ 
} 

.row.reorder-xs > [class*="col-"] { 
    transform: rotate(-180deg); 
    direction: ltr; /* Fix the horizontal alignment */ 
} 
} 

Sebbene questo approccio funziona bene, ho una soluzione diversa:

La griglia bootstrap funziona galleggiante colonne di sinistra, questo può essere facilmente modificato con css. Guarda il markup qui sotto, come bonus col-md-offset-1 invertito per emulare 5 colonne centrate.

HTML

<div class="container"> 
<div class="row reverseOrder"> 
    <div class="col-md-2 col-md-offset-1">A</div> 
    <div class="col-md-2">B</div> 
    <div class="col-md-2">c</div> 
    <div class="col-md-2">d</div> 
    <div class="col-md-2 ">e</div> 
</div> 
</div> 

CSS

@media screen and (min-width: 992px) { 
    .reverseOrder [class^="col-"] { 
     float: right; 
    } 
    .reverseOrder .col-md-offset-1 { 
    margin-right: 8.333333333333332%; 
    margin-left: 0px; 
    } 
} 

JSFIDDLE

Answer 5

Ho avuto lo stesso problema e risolto in questo modo:

HTML

<div class="col-md-10 col-sm-10 col-xs-12 more-than" style="display: none;"> 
    <p>test</p>  
</div> 
<div class="col-md-2 col-sm-2 col-xs-12"> 
    <p>test</p> 
</div> 
<div class="col-md-10 col-sm-10 col-xs-12 less-than"> 
    <p>test</p>     
</div> 

CSS

@media (max-width: 767px){ 
    .less-than { 
     display: none; 
    } 
    .more-than { 
     display: block !important; 
    } 
} 

Answer 6

In Bootstrap 4, si possibile cambio l'ordine delle colonne larghezza ...

Aggiornamento 2017 - Bootstrap 4 alpha 6

In 3.x è possibile solo spingere/tirare le colonne a sinistra oa destra (in orizzontale). Con i nuovi utils FlexBox ordinazione in 4.x, è ora possibile cambio l'ordine delle colonne in verticale ...

<div class="container"> 
    <div class="row"> 
    <div class="col-12">1</div> 
    <div class="col-sm-12 flex-first flex-sm-unordered">2 (first on xs)</div> 
    </div> 
</div> 

http://www.codeply.com/go/7RUJORgxBK

Aggiornamento Bootstrap 4 Beta

L'alfa Gli ordini flex- sono stati modificati in classi order-.

<div class="container"> 
    <div class="row"> 
    <div class="col-12 order-sm-1 order-2">1</div> 
    <div class="col-sm-12 order-1">2 (first on xs)</div> 
    </div> 
</div> 

https://www.codeply.com/go/VUjKsM3cUD