Manipulation de l’ordre des colonnes en utilisant col-lg-push et col-lg-pull dans Twitter Bootstrap 3

Je suis en train de lire la documentation sur Twitter Bootstrap 3, et j’ai essayé de suivre l’ordre des colonnes comme indiqué sur cette page, mais j’ai frappé le mur. Je ne comprends pas pourquoi un tel code fonctionne ni comment définir correctement le paramètre. Ce que je veux montrer, c’est une grid composée de la longueur 5 et de l’autre longueur 5 et enfin d’une longueur 2.

Donc le mien est quelque chose comme ça:

[5] [5] [2] 

Et ce que je veux faire, c’est que, lorsqu’elle est affichée sur le bureau, la disposition ci-dessus est affichée, mais quand elle est affichée sur le mobile, je veux d’abord montrer l’object de première longueur 5, puis le premier object de longueur 5 , verticalement. Comme ça:

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

Tandis que je tentais de suivre l’étape expliquée dans la documentation ci-dessus, j’ai obtenu le premier object de longueur 5 sur le second, même s’il se trouvait sur des plates-formes mobiles. En d’autres termes, j’ai ceci:

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

Alors, comment puis-je correctement placer le second sur le premier? Ou puisque j’utilise le même object de longueur, l’ordre des colonnes ne pourrait-il pas fonctionner?

Voici mon code pour votre information:

 

De plus, la documentation ne précise pas ce que signifie pull ou push . 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 trouvé les classes col-lg-push-x ou pull dans les fichiers originaux de 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 RC2.

de toute façon, les classes col-push-* et pull existaient et cela conviendrait à vos besoins. Voici une démo

 
Content B
Content A
Content C

EDIT: CI-DESSOUS EST LA REPONSE POUR LA RELEASE OFFICIELLE v3.0

Voir aussi cet article sur le sujet

  • col-vp-push-x = poussez la colonne vers la droite par un nombre x de colonnes, en commençant par l’endroit où la colonne devrait normalement afficher -> position: relative , sur un port de vue plus grand ou vp .

  • col-vp-pull-x = tire la colonne vers la gauche par un nombre x de colonnes, en partant de l’endroit où la colonne devrait normalement afficher -> position: relative , sur un port de visualisation vp ou supérieur.

    vp = xs, sm, md ou lg

    x = 1 à 12

Je pense que ce qui gêne le plus les 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 que cela ne fait que pousser ou tirer des ports de visualisation supérieur ou égal à ce qui a été spécifié. col-sm-push-5 ne repoussera que 5 colonnes sur les ports de visualisation sm ou supérieurs. C’est parce que Bootstrap est un framework “mobile first”, votre code HTML doit donc refléter la version mobile de votre site. Le Pushing and Pulling est alors effectué sur les écrans plus grands.

  • (Desktop) Les ports d’affichage plus grands sont poussés et tirés.
  • (Mobile) Les ports d’affichage plus petits sont affichés dans l’ordre normal.

DEMO

 
Content B
Content A
Content C

Port de vue> = sm

 |A|B|C| 

Port de visualisation

 |B| |A| |C| 

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

Avec la version v4, la boîte à outils et les autres modifications apscopes au système de grid sont supprimées, et les classes push \ pull ont été supprimées au profit de l’utilisation de la commande Flexbox.

  • Utilisez les classes .order-* pour contrôler l’ordre visuel (où * = 1 à 12)
  • Cela peut également être spécifique à la grid .order-md-*
  • Aussi .order-first (-1) et .order-last (13) disponible
 
1st yet 2nd
2nd yet 1st

Pull “tire” le div vers la gauche du navigateur et et Push “pousse” le div loin de la gauche du navigateur.

Comme: entrer la description de l'image ici

Donc, fondamentalement, dans une disposition en 3 colonnes de n’importe quelle page Web, le “Corps principal” apparaît dans le “Centre” et dans la vue “Mobile” le “Corps principal” apparaît dans le “Haut” de la page. Ceci est principalement désiré par tout le monde avec la disposition de 3 colonnes.

 

This is Content

orem Ipsum ...

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

J’espère que cela aide

Je pensais juste que j’appendais mes 0,2 $ à ces deux bonnes réponses. J’ai eu un cas où j’ai dû déplacer la dernière colonne jusqu’au sumt dans une situation à 3 colonnes.

[ABC]

à

[C]

[UNE]

[B]

La classe de .col-xx-push-X ne fait rien d’autre que pousser une colonne vers la droite avec la left: XX%; il suffit donc de pousser une colonne à droite pour append le nombre de pseudo-colonnes à gauche.

Dans ce cas:

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

  • l’un ( col-md-4 ) va droit par la sum des deux premiers qui vont à gauche (5 + 3 = 8);


 
C
A
B

entrer la description de l'image ici

Une idée fausse commune à l’ordre des colonnes est que je devrais (ou pouvais) faire pousser et tirer sur des appareils mobiles, et que les vues du bureau devraient apparaître 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 le fait de pousser et de tirer est effectué sur les plus grandes vues du bureau. pas sur les appareils mobiles voir ..

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

Si vous avez besoin d’organiser les données en colonnes de 1/2/4 en fonction de la taille de la fenêtre d’affichage, les options push-pull peuvent ne pas être envisageables. Peu importe comment vous commandez vos articles en premier lieu, une des tailles peut vous donner une mauvaise commande.

Une solution dans ce cas consiste à utiliser des lignes et des colonnes nestedes sans classes push ou pull.

Exemple

En XS tu veux …

 A B C D E F G H 

Dans SM vous voulez …

 AE BF CG DH 

En MD et au-dessus, vous voulez …

 ACEG BDFH 

Solution

Utilisez des éléments enfants à deux colonnes nesteds dans un élément parent à deux colonnes:

Voici un extrait de travail:

    

A

B

C

D

E

F

G

H