[Bootstrap 3] push pull di colonne

[supermac]

Spero di essere nel forum giusto, a rigore Bootstrap sarebbe JS ma questa è faccenda di stili e classi per cui provo a postare qui.
Magari è una stupidata... è che non so come si faccia (l'ho fatto con Foundation ma non riesco a farlo con Bootstrap):
In un layout di questo tipo:

<div class="col-xs-12 col-lg-6"> colonna1</div>
<div class="col-xs-12 col-lg-6"> colonna2</div>

mi va benissimo che con schermi grandi si vedano nell'ordine indicato ma vorrei che quando vale la classe xs (cioè dimensioni di schermo piccole) la colonna2 venisse visualizzata prima della colonna1...
commesefà?

[KillerWorm]

Sezione corretta.
In Bootstrap 3 puoi usare le classi col-push- e col-pull-

Essendo mobile-first ti conviene però partire da una disposizione delle colonne nell'ordine in cui devono essere mostrate su mobile (quindi le colonne già invertite)

Potresti avere quindi una cosa del genere:

<div class="col-xs-12 col-lg-6 col-lg-push-6"> colonna2</div>
<div class="col-xs-12 col-lg-6 col-lg-pull-6"> colonna1</div>

.
In alternativa, se tu avessi intenzione di usare Bootstrap 4 è possibile usare la classe order sulle colonne oppue flex-column-reverse (dell'utility flex-direction) sulla riga.

[supermac]

Gentilissimo grazie.
Stavo proprio guardando BS4... ma la classe order come va usata?

[KillerWorm]

Parti sempre dalla disposizione per mobile, a quel punto puoi avere una cosa del genere:

<div class="col-xs-12 col-lg-6 order-lg-2"> colonna2</div>
<div class="col-xs-12 col-lg-6 order-lg-1"> colonna1</div>

.
o anche:

<div class="col-xs-12 col-lg-6 order-lg-last"> colonna2</div>
<div class="col-xs-12 col-lg-6 order-lg-first"> colonna1</div>

.
oppure semplicemente, applicandolo ad una colonna:

<div class="col-xs-12 col-lg-6 order-lg-2"> colonna2</div>
<div class="col-xs-12 col-lg-6"> colonna1</div>

.
oppure:

<div class="col-xs-12 col-lg-6 order-lg-last"> colonna2</div>
<div class="col-xs-12 col-lg-6"> colonna1</div>

.
oppure:

<div class="col-xs-12 col-lg-6"> colonna2</div>
<div class="col-xs-12 col-lg-6 order-lg-first"> colonna1</div>

.
o altre sintassi simili.

[supermac]

Esaustivo, grazie