Ora sto leggendo la documentazione su Twitter Bootstrap 3 e ho provato a seguire l'ordinamento delle colonne come mostrato in questa pagina, ma ho colpito il muro. Non capisco perché un tale codice funzioni né come specificare correttamente l'impostazione. Quello che voglio mostrare è una griglia, che consiste di lunghezza 5 e l'altra lunghezza 5, e infine una griglia lunghezza 2.

Quindi il mio è qualcosa del genere:

[5] [5] [2]

E quello che voglio ottenere è, quando viene visualizzato sul desktop, viene visualizzato il layout sopra, ma quando viene visualizzato su dispositivo mobile, voglio mostrare prima il secondo oggetto lunghezza 5, quindi il primo oggetto lunghezza 5 e infine l'oggetto lunghezza 2 , in verticale. Come questo:

[5] (second)
[5] (first)
[2]  

Mentre provavo a seguire il passaggio spiegato nella documentazione precedente, ho ottenuto il primo oggetto 5 di lunghezza rispetto al secondo nonostante fosse su piattaforme mobili, che come ho detto dovrebbe visualizzare in cima l'oggetto di seconda lunghezza 5. In altre parole, ho ottenuto questo:

[5] (first)
[5] (second)
[2] 

Quindi, come posso mettere correttamente il secondo sul primo? O poiché utilizzo lo stesso oggetto lunghezza, l'ordinamento delle colonne potrebbe non funzionare?

Ecco il mio codice per tua informazione:

<div class='row'>
<div class='col-lg-5 col-lg-push-5'></div>
<div class='col-lg-5 col-lg-pull-5'></div>
<div class='col-lg-2'></div>
</div>

Inoltre, la documentazione non chiarisce cosa pullo cosa pushsignifichi. Quindi mi sto perdendo qualcosa?

Grazie.

Questa risposta è in tre parti, vedi sotto per la versione ufficiale (v3 e v4)

Non sono nemmeno riuscito a trovare le classi col-lg-push-x o pull nei file originali per RC1 che ho scaricato, quindi controlla il tuo file bootstrap.css. speriamo che questo sia qualcosa che risolveranno in RC2.

comunque, esistevano le classi col-push- * e pull e questo si adattava alle tue esigenze. Ecco una demo

<div class="row">
    <div class="col-sm-5 col-push-5">
        Content B
    </div>
    <div class="col-sm-5 col-pull-5">
        Content A
    </div>
    <div class="col-sm-2">
        Content C
    </div>
</div>

EDIT: SOTTO È LA RISPOSTA PER IL RILASCIO UFFICIALE v3.0

Vedi anche questo post sul blog sull'argomento

• col-vp-push-x= spinge la colonna a destra per x numero di colonne, a partire da dove la colonna verrebbe normalmente visualizzata -> position: relative, su una vp o una vista-porta più grande.

• col-vp-pull-x= tira la colonna a sinistra per x numero di colonne, a partire da dove la colonna verrebbe normalmente visualizzata -> position: relative, su una vp o una vista-porta più grande.

  vp = xs, sm, md o lg

  x = 1 a 12

Penso che ciò che incasina la maggior parte delle persone, è che devi cambiare l'ordine delle colonne nel tuo markup HTML (nell'esempio sotto, B viene prima di A) , e che fa solo il push o pull su view-port che sono maggiore o uguale a quanto specificato. cioè col-sm-push-5spingerà solo 5 colonne su smview-port o superiore. Questo perché Bootstrap è un framework "mobile first", quindi il tuo HTML dovrebbe riflettere la versione mobile del tuo sito. La spinta e la trazione vengono quindi eseguite sugli schermi più grandi.

• (Desktop) Le porte di visualizzazione più grandi vengono spinte e estratte.
• (Mobile) Le porte di visualizzazione più piccole vengono visualizzate in ordine normale.

DEMO

<div class="row">
    <div class="col-sm-5 col-sm-push-5">
        Content B
    </div>
    <div class="col-sm-5 col-sm-pull-5">
        Content A
    </div>
    <div class="col-sm-2">
        Content C
    </div>
</div>

View-port> = sm

|A|B|C|

View-port <sm

|B|
|A|
|C|

MODIFICA: SOTTO È LA RISPOSTA PER v4.0

Con v4 arriva flexbox e altre modifiche al sistema a griglia e le classi push \ pull sono state rimosse a favore dell'utilizzo dell'ordinamento flexbox.

• Usa le .order-*classi per controllare l'ordine visivo (dove * = da 1 a 12)
• Questo può anche essere specifico per il livello della griglia .order-md-*
• Disponibili anche .order-first(-1) e .order-last(13)

<div class="row">
  <div class="col order-2">1st yet 2nd</div>
  <div class="col order-1">2nd yet 1st</div>
</div>

Pull "tira" il div verso la sinistra del browser e Push "spinge" il div lontano dalla sinistra del browser.

Piace:

Quindi sostanzialmente in un layout a 3 colonne di qualsiasi pagina web il "Corpo principale" appare in "Centro" e nella vista "Mobile" il "Corpo principale" appare nella parte superiore della pagina. Questo è principalmente desiderato da tutti con layout a 3 colonne.

<div class="container">
    <div class="row">
        <div id="content" class="col-lg-4 col-lg-push-4 col-sm-12">
        <h2>This is Content</h2>
        <p>orem Ipsum ...</p>
        </div>

        <div id="sidebar-left" class="col-lg-4  col-sm-6 col-lg-pull-4">
        <h2>This is Left Sidebar</h2>
        <p>orem Ipsum...</p>
        </div>


        <div id="sidebar-right" class="col-lg-4 col-sm-6">
        <h2>This is Right Sidebar</h2>
        <p>orem Ipsum.... </p>
        </div>
    </div>
</div>

Puoi vederlo qui: http://jsfiddle.net/DrGeneral/BxaNN/1/

Spero che sia d'aiuto

Idea sbagliata L'idea sbagliata comune con l'ordinamento delle colonne è che, dovrei (o potrei) fare il push and pull su dispositivi mobili e che le viste del desktop dovrebbero essere visualizzate nell'ordine naturale del markup. Questo è sbagliato.

Reality Bootstrap è un primo framework mobile. Ciò significa che l'ordine delle colonne nel markup HTML deve rappresentare l'ordine in cui si desidera che vengano visualizzate sui dispositivi mobili. Ciò significa che le operazioni di push e pull vengono eseguite nelle viste desktop più grandi. non su dispositivi mobili visualizza ..

Brandon Schmalz - Sviluppatore Web Full Stack Dai un'occhiata alla descrizione completa qui

Mi è sembrato di aggiungere $ 0,2 a quelle 2 buone risposte. Ho avuto un caso in cui ho dovuto spostare l'ultima colonna fino in cima in una situazione a 3 colonne.

[A] [B] [C]

per

[C]

[UN]

[B]

La classe di Boostrap .col-xx-push-Xnon fa nient'altro che spingere una colonna a destra, left: XX%; quindi tutto ciò che devi fare per spingere una colonna a destra è aggiungere il numero di pseudo colonne andando a sinistra.

In questo caso:

• due colonne ( col-md-5e col-md-3) stanno andando a sinistra, ognuna con il valore di quella che sta andando a destra;

• uno ( col-md-4) sta andando a destra dalla somma dei primi due andando a sinistra (5 + 3 = 8);

<div class="row">
    <div class="col-md-4 col-md-push-8 ">
        C
    </div>
    <div class="col-md-5 col-md-pull-4">
        A
    </div>
    <div class="col-md-3 col-md-pull-4">
        B
    </div>
</div>

Se è necessario organizzare i dati in colonne di 1/2/4 a seconda delle dimensioni della finestra, premere e tirare potrebbe non essere affatto un'opzione. Non importa come ordini i tuoi articoli in primo luogo, una delle taglie potrebbe dare un ordine sbagliato.

Una soluzione in questo caso consiste nell'utilizzare righe e colonne nidificate senza alcuna classe push o pull.

Esempio

In XS vuoi ...

A
B
C
D
E
F
G
H

In SM vuoi ...

A   E
B   F
C   G
D   H

In MD e sopra vuoi ...

A   C   E   G
B   D   F   H

Soluzione

Utilizzare gli elementi figlio nidificati a due colonne in un elemento padre a due colonne circostante:

Ecco uno snippet funzionante:

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript" ></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-sm-6">
    <div class="row">
      <div class="col-md-6"><p>A</p><p>B</p></div>
      <div class="col-md-6"><p>C</p><p>D</p></div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="row">
      <div class="col-md-6"><p>E</p><p>F</p></div>
      <div class="col-md-6"><p>G</p><p>H</p></div>
    </div>
  </div>
</div>

Un'altra bellezza di questa soluzione è che gli articoli compaiono nel codice nel loro ordine naturale (A, B, C, ... H) e non devono essere mescolati, il che è bello per la generazione CMS.