Le risposte qui funzionano solo per 2 celle, ma non appena quelle colonne ne contengono di più, può portare a un po 'più di complessità. Penso di aver trovato una soluzione generalizzata per qualsiasi numero di celle in più colonne.
#Goals Ottieni una sequenza verticale di tag sul dispositivo mobile per sistemarsi nell'ordine richiesto dal design su tablet / desktop. In questo esempio concreto, un tag deve entrare nel flusso prima di quanto farebbe normalmente, e un altro dopo di quanto normalmente farebbe.
##Mobile
[1 headline]
[2 image]
[3 qty]
[4 caption]
[5 desc]
## Tablet +
[2 image ][1 headline]
[ ][3 qty ]
[ ][5 desc ]
[4 caption][ ]
[ ][ ]
Quindi il titolo deve essere mischiato direttamente su tablet +, e tecnicamente, così fa desc: si trova sopra il tag didascalia che lo precede sul cellulare. In un attimo vedrai che anche 4 didascalie sono in difficoltà.
Supponiamo che ogni cella possa variare in altezza e debba essere allineata dall'alto verso il basso con la cella successiva (escludendo i trucchi deboli come una tabella).
Come per tutti i problemi di Bootstrap Grid, il passaggio 1 è rendersi conto che l'HTML deve essere in ordine mobile, 1 2 3 4 5, nella pagina. Quindi, determina come far riordinare un tablet / desktop in questo modo, idealmente senza Javascript.
La soluzione per ottenere 1 headlinee 3 qtysedersi a destra, non a sinistra è semplicemente impostarli entrambi pull-right. Questo vale per i CSS float: right, nel senso che trovano il primo spazio aperto che si adatteranno a destra. Puoi pensare al processore CSS del browser che funziona nel seguente ordine: 1 si adatta all'angolo in alto a destra. 2 è il prossimo ed è regolare ( float: left), quindi va nell'angolo in alto a sinistra. Quindi 3, che è float: rightcosì salta sotto 1.
Ma questa soluzione non era abbastanza per 4 captions; perché le 2 celle di destra sono così corte 2 imagesulla sinistra tende ad essere più lunghe di entrambe. Bootstrap Grid è un hack float glorificato, il che significa che 4 caption è float: left. Con 2 imagesoccupare così tanto spazio a sinistra,4 caption i tentativi per adattarsi nel prossimo spazio a disposizione - spesso il colonna di destra, non a sinistra dove volevamo.
La soluzione qui (e più in generale per qualsiasi problema come questo) era quella di aggiungere un tag hack, nascosto su dispositivo mobile, che esiste su tablet + per eliminare la didascalia, che viene quindi coperto da un margine negativo - in questo modo:
[2 image ][1 headline]
[ ][3 qty ]
[ ][4 hack ]
[5 captions][6 desc ^^^]
[ ][ ]
http://jsfiddle.net/b9chris/52VtD/16633/
HTML:
<div id=headline class="col-xs-12 col-sm-6 pull-right">Product Headline</div>
<div id=image class="col-xs-12 col-sm-6">Product Image</div>
<div id=qty class="col-xs-12 col-sm-6 pull-right">Qty, Add to cart</div>
<div id=hack class="hidden-xs col-sm-6">Hack</div>
<div id=caption class="col-xs-12 col-sm-6">Product image caption</div>
<div id=desc class="col-xs-12 col-sm-6 pull-right">Product description</div>
CSS:
#hack { height: 50px; }
@media (min-width: @screen-sm) {
#desc { margin-top: -50px; }
}
Quindi, la soluzione generalizzata qui è quella di aggiungere tag hack che possono scomparire sui dispositivi mobili. Su tablet + l'hack, i tag consentono ai tag visualizzati di apparire prima o poi nel flusso, quindi vengono tirati su o giù per coprire quei tag hack.
Nota: ho usato altezze fisse per il semplice esempio nel jsfiddle collegato, ma il contenuto del sito effettivo su cui stavo lavorando varia in altezza in tutti e 5 i tag. Viene visualizzato correttamente con una varianza relativamente grande nelle altezze dei tag, in particolare immagine e descrizione.
Nota 2: a seconda del layout, potresti avere un ordine di colonna abbastanza coerente su tablet + (o risoluzioni più grandi), che puoi evitare l'uso di tag hack, usando margin-bottominvece, in questo modo:
Nota 3: utilizza Bootstrap 3. Bootstrap 4 utilizza un set di griglia diverso e non funzionerà con questi esempi.
http://jsfiddle.net/b9chris/52VtD/16632/