Manipulation de l'ordre des colonnes à l'aide de col-lg-push et col-lg-pull dans Twitter Bootstrap 3

Question

Je suis en train de lire la documentation sur Twitter Bootstrap 3, et j'ai essayé de suivre l'ordre des colonnes comme indiqué dans cette page ( http://getbootstrap.com/css/#grid ) mais je me suis heurté à un mur. Je ne comprends pas pourquoi un tel code fonctionne ni comment spécifier correctement le paramètre. Ce que je veux montrer, c'est une grille de longueur 5, une autre de longueur 5, et enfin une grille de longueur 2.

Le mien est donc quelque chose comme ça :

[5] [5] [2]

Et ce que je veux réaliser, c'est que lorsqu'il est affiché sur le bureau, la mise en page ci-dessus est affichée, mais lorsqu'il est affiché sur le mobile, je veux afficher le deuxième objet de longueur 5 d'abord, puis le premier objet de longueur 5, et enfin l'objet de longueur 2, verticalement. Alors que j'ai essayé de suivre l'étape expliquée dans la documentation ci-dessus, j'ai obtenu le premier objet de longueur 5 sur le second malgré le fait d'être sur des plateformes mobiles, qui comme je l'ai dit devrait afficher le second objet de longueur 5 sur le dessus...

Comment puis-je donc placer correctement la deuxième colonne sur la première ? Ou bien, puisque j'utilise un objet de même longueur, l'ordre des colonnes pourrait-il ne pas fonctionner ?

Voici mon code pour votre information :

<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>

De plus, la documentation ne précise pas ce que pull ou push signifie. Alors, est-ce que j'ai raté quelque chose ?

Merci.

Answer 1

Je n'ai même pas pu trouver les classes col-lg-push-x ou pull dans les fichiers originaux de la RC1 que j'ai téléchargés, alors vérifiez votre fichier bootstrap.css. Espérons que c'est quelque chose qu'ils vont régler dans la RC2.

Quoi qu'il en soit, les classes col-push-* et pull ont existé et cela répondra à vos besoins. Voici une démo

<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 : Ci-dessous se trouve la réponse pour la version officielle v3.0+.

Voir aussi Cet article de blog sur le sujet

• col-vp-push-x = pousser la colonne vers la droite de x le nombre de colonnes, en commençant par l'endroit où la colonne serait normalement rendue -> position: relative sur un vp ou plus grand.

• col-vp-pull-x = tirer la colonne vers la gauche en x le nombre de colonnes, en commençant par l'endroit où la colonne serait normalement rendue -> position: relative sur un vp ou plus grand.

  vp \= xs, sm, md, ou lg

  x \= 1 à 12

Je pense que ce qui perturbe la plupart des gens, est que vous devez modifier l'ordre des colonnes dans votre code HTML (dans l'exemple ci-dessous, B vient avant A). et qu'il ne fait que pousser ou tirer sur les ports de vue qui sont supérieurs ou égaux à ce qui a été spécifié. col-sm-push-5 ne poussera que 5 colonnes sur sm view-ports ou plus. En effet, Bootstrap est un framework "mobile first", et votre HTML doit donc refléter la version mobile de votre site. Le Pushing et le Pulling sont alors effectués sur des écrans plus grands.

• (Desktop) Les hublots plus grands sont poussés et tirés.
• (Mobile) Les hublots plus petits sont rendus dans l'ordre normal.

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>

Port d'observation >= sm

|A|B|C|

Port de vue < sm

|B|
|A|
|C|

Answer 2

Pull "tire" la division vers la gauche du navigateur et Push "pousse" la division vers la gauche du navigateur.

Comme :

Ainsi, dans une mise en page à trois colonnes, le "corps principal" apparaît au "centre" de la page, tandis qu'en vue "mobile", le "corps principal" apparaît en "haut" de la page. C'est ce que souhaitent tous les utilisateurs de la mise en page en 3 colonnes.

<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>

Vous pouvez le consulter ici : http://jsfiddle.net/DrGeneral/BxaNN/1/

J'espère que cela vous aidera

Answer 3

J'ai juste eu envie d'ajouter mon grain de sel à ces deux bonnes réponses. J'ai eu un cas où j'ai dû déplacer la dernière colonne tout en haut d'une situation à 3 colonnes.

[A] [B] [C]

à

[C]

[A]

[B]

La classe de Boostrap .col-xx-push-X ne fait rien d'autre que de pousser une colonne vers la droite avec left: XX%; Ainsi, pour pousser une colonne vers la droite, il suffit d'ajouter un certain nombre de pseudo-colonnes vers la gauche.

Dans ce cas :

• deux colonnes ( col-md-5 et col-md-3 ) vont à gauche, chacun ayant la valeur de celui qui va à droite ;

• un( col-md-4 ) va à droite par la somme des deux premiers qui vont à gauche (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>