Bootstrap 3: Push/pull colonne solo su piccole dimensioni dello schermo

Ho il seguente layout di una pagina:

<div class="col-lg-3">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-2">4</div>
<div class="col-lg-3">5</div>

 --------- ----- ----- ----- ---------
|    1    |  2  |  3  |  4  |    5    |
 --------- ----- ----- ----- ---------

Ma più piccoli, con dimensioni di schermo vorrei il seguente layout:

<div class="col-xs-6">1</div>
<div class="col-xs-6">5</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">3</div>
<div class="col-xs-4">4</div>

 ----------------- -----------------
|        1        |        5        |
 ----------------- -----------------
|     2     |     3     |     4     |
 ----------- ----------- -----------

(Nota la ri-organizzare l’ordine delle colonne.) È possibile spingere/tirare solo le colonne più piccole dimensioni dello schermo? Ho provato il seguente, ma ho l’strani layout, e sembra perdere <div>5</div> completamente…:

<div class="col-lg-3 col-xs-6">1</div>
<div class="col-lg-2 col-xs-4 col-xs-push-4">2</div>
<div class="col-lg-2 col-xs-4>3</div>
<div class="col-lg-2 col-xs-4>4</div>
<div class="col-lg-3 col-xs-6 col-xs-pull-12">5</div>
InformationsquelleAutor mpdc | 2014-02-21

 

2 Replies
  1. 145

    Risposto io, semplicemente pensando: il primo mobile!

    <div class="col-lg-3 col-xs-6">1</div>
    <div class="col-lg-3 col-xs-6 col-lg-push-6">5</div>
    <div class="col-lg-2 col-xs-4 col-lg-pull-3">2</div>
    <div class="col-lg-2 col-xs-4 col-lg-pull-3">3</div>
    <div class="col-lg-2 col-xs-4 col-lg-pull-3">4</div>

    Farli nell’ordine che voglio sul tablet prima, quindi spingere/tirare in posizione sul desktop.

    • Sì, questo è il modo giusto per farlo, dal momento che il Bootstrap (3) è di per sé mobile-first.
    • Infatti questa soluzione funziona alla grande bootply.com/SF3lEO5Ex4
    • Oggi ho imparato la mia lezione con boostrap… Pensare prima mobile. Grazie!
  2. 5

    Ho avuto un leggermente diverso requisito (ancora in linee simili)

    il seguente ottiene me c’:

    <div class="row">
        <div class="col-lg-1 col-xs-2">TIME</div>
        <div class="col-lg-5 col-xs-6">EVENT</div>
        <div class="col-lg-2 col-xs-4">STATUS</div>
    
        <div class="col-xs-2 visible-xs"></div> @*offset for xs*@
    
        <div class="col-lg-2 col-xs-6">START LIST</div>
        <div class="col-lg-2 col-xs-4">RESULTS</div>
    </div>

Lascia un commento