Je lis maintenant la documentation sur Twitter Bootstrap 3 et j'ai essayé de suivre l'ordre des colonnes comme indiqué sur cette page mais heurté le 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, qui est composée de la longueur 5, et l'autre longueur 5, et enfin une grille de longueur 2.

Donc le mien est quelque chose comme ça:

[5] [5] [2]

Et ce que je veux réaliser, c'est que, lorsqu'il est visualisé sur le bureau, la mise en page ci-dessus s'affiche, mais lorsqu'elle est visualisée sur un mobile, je veux d'abord montrer le deuxième objet de longueur 5, puis le premier objet de longueur 5, et enfin l'objet de longueur 2 , verticalement. Comme ça:

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

Alors que j'essayais de suivre l'étape expliquée dans la documentation ci-dessus, j'ai obtenu le premier objet de longueur 5 sur le second bien que je sois sur des plates-formes mobiles, qui, comme je l'ai dit, devrait afficher le deuxième objet de longueur 5 en haut. En d'autres termes, j'ai ceci:

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

Alors, comment puis-je mettre correctement le second sur le premier? Ou puisque j'utilise le même objet de 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>

En outre, la documentation ne précise pas ce pulloupush signifie. Alors est-ce que je manque quelque chose?

Merci.

Cette réponse est en trois parties, voir ci-dessous pour la version officielle (v3 et v4)

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

de toute façon, les classes col-push- * et pull existaient 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 EST LA RÉPONSE À LA COMMUNIQUÉ OFFICIELLE v3.0

Voir aussi cet article de blog sur le sujet

• col-vp-push-x= pousse la colonne vers la droite de x nombre de colonnes, à partir de l'endroit où la colonne serait normalement rendue -> position: relative, sur un port d'affichage vp ou plus grand.

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

  vp = xs, sm, md ou lg

  x = 1 à 12

Je pense que ce qui dérange la plupart des gens, c'est que vous devez changer l'ordre des colonnes dans votre balisage HTML (dans l'exemple ci-dessous, B vient avant A) , et qu'il ne fait que pousser ou tirer sur les ports d'affichage qui sont supérieur ou égal à ce qui a été spécifié. ie col-sm-push-5ne poussera que 5 colonnes sur les smview-ports ou plus. En effet, Bootstrap est un framework «mobile first», donc votre code HTML doit refléter la version mobile de votre site. La poussée et la traction sont ensuite effectuées sur les écrans plus grands.

• (Bureau) Les ports d'affichage plus grands sont poussés et tirés.
• (Mobile) Les petits ports d'affichage 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>

Vue-port> = sm

|A|B|C|

View-port <sm

|B|
|A|
|C|

EDIT: CI-DESSOUS EST LA RÉPONSE POUR la v4.0

Avec la v4 vient flexbox et d'autres changements au système de grille et les classes push \ pull ont été supprimées en faveur de l'utilisation de la commande flexbox.

• Utilisez des .order-*classes pour contrôler l'ordre visuel (où * = 1 à 12)
• Cela peut également être spécifique au niveau de la grille .order-md-*
• Aussi .order-first(-1) et .order-last(13) disponibles

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

Tirez "tire" le div vers la gauche du navigateur et appuyez sur "pousse" le div loin de la gauche du navigateur.

Comme:

Donc, fondamentalement, dans une mise en page à 3 colonnes de n'importe quelle page Web, le "corps principal" apparaît au "Centre" et dans la vue "Mobile", le "corps principal" apparaît en haut de la page. Ceci est principalement souhaité par tout le monde avec une disposition 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 voir ici: http://jsfiddle.net/DrGeneral/BxaNN/1/

J'espère que ça aide

Idée fausse L'idée fausse courante avec l'ordre des colonnes est que je devrais (ou pourrais) faire le push et le pull sur les appareils mobiles, et que les vues du bureau devraient être rendues dans l'ordre naturel du balisage. C'est faux.

Reality Bootstrap est un premier framework mobile. Cela signifie que l'ordre des colonnes dans votre balisage HTML doit représenter l'ordre dans lequel vous souhaitez les afficher sur les appareils mobiles. Cela signifie que la poussée et la traction sont effectuées sur les vues de bureau plus grandes. pas sur la vue des appareils mobiles.

Brandon Schmalz - Développeur Web Full Stack Consultez la description complète ici

J'ai juste eu l'impression d'ajouter mon 0,2 $ à ces 2 bonnes réponses. J'ai eu un cas où j'ai dû déplacer la dernière colonne tout le chemin vers le haut dans une situation à 3 colonnes.

[ABC]

à

[C]

[UNE]

[B]

La classe de Boostrap .col-xx-push-Xne fait rien d'autre que pousse une colonne vers la droite avecleft: XX%; donc tout ce que vous avez à faire pour pousser une colonne à droite est d'ajouter le nombre de pseudo colonnes à gauche.

Dans ce cas:

• deux colonnes ( col-md-5et col-md-3) vont à gauche, chacune avec la valeur de celle qui va à droite;

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

Si vous avez besoin d'organiser les données en colonnes de 1/2/4 en fonction de la taille de la fenêtre, pousser et tirer peut ne pas être une option du tout. Peu importe la façon dont vous commandez vos articles en premier lieu, l'une des tailles peut vous donner une mauvaise commande.

Une solution dans ce cas consiste à utiliser des lignes et des colonnes imbriquées sans aucune classe push ou pull.

Exemple

En XS, vous voulez ...

A
B
C
D
E
F
G
H

En SM vous voulez ...

A   E
B   F
C   G
D   H

Dans MD et au-dessus, vous voulez ...

A   C   E   G
B   D   F   H

Solution

Utilisez des éléments enfants à deux colonnes imbriqués dans un élément parent à deux colonnes environnant:

Voici un extrait de code fonctionnel:

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

Une autre beauté de cette solution est que les éléments apparaissent dans le code dans leur ordre naturel (A, B, C, ... H) et ne doivent pas être mélangés, ce qui est bien pour la génération CMS.