Comment modifier l'ordre des colonnes de Bootstrap 3 sur une mise en page mobile ?

Question

Je suis en train de créer une mise en page réactive avec une barre de navigation fixe en haut. En dessous, j'ai deux colonnes, une pour la barre latérale (3) et une pour le contenu (9). Sur le bureau, cela ressemble à ceci

barre de navigation
[3][9]

Quand je resize pour déplacer le navbar est compressé et masqué, puis la barre latérale est empilée au-dessus du contenu, comme ceci :

barre de navigation
[3]
[9]

Je souhaite que le contenu principal figure en haut de la page, et je dois donc modifier l'ordre de présentation sur les mobiles :

barre de navigation
[9]
[3]

J'ai trouvé cet article qui couvre les mêmes points, mais la réponse acceptée a été modifiée pour dire que la solution ne s'applique pas à la version actuelle de Bootstrap.

Comment puis-je réorganiser ces colonnes sur un mobile ? Ou encore, comment puis-je intégrer le groupe de listes de la barre latérale dans ma barre de navigation en expansion ?

Voici mon code :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <a href="#" class="navbar-brand">Brand Title</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse navHeaderCollapse">

    <ul class="nav navbar-nav navbar-right"><!--original navbar-->
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">FAQ</a></li>
    </ul>

    </div>
  </div>
</div><!--End Navbar Div-->
    <div class="container">
  <div class="row">

    <div class="col-lg-3">
  <div class="list-group">
    <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Lorem ipsum</h4>
    <p class="list-group-item-text">Lorem Ipsum is simply dummy text.</p></a>
  </div>
</div><!--end sidebar-->

<div class="col-lg-9">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="page-header">
     Main Content
    </div>
  </div>
</div><!--end main content area-->

Answer 1

Vous ne pouvez pas modifier l'ordre des colonnes sur les petits écrans, mais vous pouvez le faire sur les grands écrans.

Changez donc l'ordre de vos colonnes.

<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>

<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>

Par défaut, le contenu principal est affiché en premier.

Ainsi, sur les mobiles, le contenu principal est affiché en premier.

En utilisant col-lg-push y col-lg-pull nous pouvons réorganiser les colonnes sur les grands écrans et afficher la barre latérale à gauche et le contenu principal à droite.

Travail tripoter ici .

Answer 2

Mis à jour en 2018

Pour le original question basée sur Bootstrap 3 la solution a été de utiliser le système push-pull .

En Bootstrap 4 c'est maintenant possible pour changer l'ordre, même lorsque les colonnes sont empilées en pleine largeur verticalement, grâce à la flexbox de Bootstrap 4. La méthode "push pull" fonctionne toujours, mais il existe désormais d'autres moyens de modifier l'ordre des colonnes dans Bootstrap 4, ce qui permet de réorganiser les colonnes en pleine largeur.

Méthode 1 - Utiliser flex-column-reverse para xs écrans :

<div class="row flex-column-reverse flex-md-row">
    <div class="col-md-3">
        sidebar
    </div>
    <div class="col-md-9">
        main
    </div>
</div>

Méthode 2 - Utiliser order-first para xs écrans :

<div class="row">
    <div class="col-md-3">
        sidebar
    </div>
    <div class="col-md-9 order-first order-md-last">
        main
    </div>
</div>

Bootstrap 4(alpha 6) : http://www.codeply.com/go/bBMOsvtJhD
Bootstrap 4.1 : https://www.codeply.com/go/e0v77yGtcr

---

Réponse originale 3.x

Pour le original question basée sur Bootstrap 3 la solution a été de utiliser le système push-pull pour les grandes largeurs, puis les colonnes apparaîtront dans leur ordre naturel sur les petites largeurs (xs). (A-B inversé en B-A).

<div class="container">
    <div class="row">
        <div class="col-md-9 col-md-push-3">
            main
        </div>
        <div class="col-md-3 col-md-pull-9">
            sidebar
        </div>
    </div>
</div>

Bootstrap 3 : http://www.codeply.com/go/wgzJXs3gel

@emre a déclaré, " Vous ne pouvez pas modifier l'ordre des colonnes sur les petits écrans, mais vous pouvez le faire sur les grands écrans. ". Toutefois, il convient de clarifier ce point en précisant : " Vous ne pouvez pas modifier l'ordre des pleine largeur "Colonnes "empilées " dans Bootstrap 3.

Answer 3

Bootstrap 3 Réponse

Les réponses ici fonctionnent pour seulement 2 cellules, mais dès que ces colonnes en ont plus, cela peut conduire à un peu plus de complexité. Je pense avoir trouvé une solution généralisée pour tout nombre de cellules dans plusieurs colonnes.

Objectifs

Faites en sorte qu'une séquence verticale d'étiquettes sur le mobile s'organise dans l'ordre souhaité sur la tablette ou le bureau. Dans cet exemple concret, une balise doit entrer dans le flux plus tôt qu'elle ne le ferait normalement, et une autre plus tard qu'elle ne le ferait normalement.

Mobile

[1 headline]
[2 image]
[3 qty]
[4 caption]
[5 desc]

Tablette +

[2 image  ][1 headline]
[         ][3 qty     ]
[         ][5 desc    ]
[4 caption][          ]
[         ][          ]

Le titre doit donc être déplacé vers la droite sur les tablettes+, et techniquement, c'est aussi le cas du desc - il se trouve au-dessus de la balise caption qui le précède sur mobile. Vous verrez dans un instant que la légende 4 a également des problèmes.

Supposons que chaque cellule puisse varier en hauteur et qu'elle doive être au même niveau de haut en bas que la cellule suivante (ce qui exclut les astuces faibles comme un tableau).

Comme pour tous les problèmes liés à la grille Bootstrap, l'étape 1 consiste à réaliser que le HTML doit être dans l'ordre mobile, 1 2 3 4 5, sur la page. Ensuite, il faut déterminer comment faire en sorte que la tablette/l'ordinateur de bureau se réorganise de cette manière - idéalement sans Javascript.

La solution pour obtenir 1 headline y 3 qty pour s'asseoir à droite et non à gauche, il suffit de les placer tous les deux pull-right . Cela s'applique aux CSS float: right c'est-à-dire qu'ils trouvent le premier espace libre qui leur convient à droite. Vous pouvez imaginer que le processeur CSS du navigateur travaille dans l'ordre suivant : 1 s'insère dans le coin supérieur droit. Le 2 est le suivant et est régulier ( float: left ), il va donc dans le coin supérieur gauche. Ensuite, 3, qui est float: right pour qu'il saute en dessous de 1.

Mais cette solution n'était pas suffisante pour 4 caption parce que les deux cellules de droite sont si courtes 2 image à gauche a tendance à être plus long que les deux réunis. Bootstrap Grid est un bidouillage glorifié de flotteurs, ce qui signifie que 4 caption est float: left . Avec 2 image qui occupe tant de place sur la gauche, 4 caption tente de s'insérer dans le prochain espace disponible - souvent la colonne de droite, et non la gauche où nous le voulions.

La solution ici (et plus généralement pour tout problème de ce type) a été d'ajouter une balise hack, cachée sur mobile, qui existe sur tablette+ pour pousser la légende, qui est ensuite couverte par une marge négative - comme ceci :

[2 image  ][1 headline]
[         ][3 qty     ]
[         ][4 hack    ]
[5 caption][6 desc ^^^]
[         ][          ]

http://jsfiddle.net/b9chris/52VtD/16633/

HTML :

<div id=headline class="col-xs-12 col-sm-6 pull-right">Product Headline</div>
<div id=image class="col-xs-12 col-sm-6">Product Image</div>
<div id=qty class="col-xs-12 col-sm-6 pull-right">Qty, Add to cart</div>
<div id=hack class="hidden-xs col-sm-6">Hack</div>
<div id=caption class="col-xs-12 col-sm-6">Product image caption</div>
<div id=desc class="col-xs-12 col-sm-6 pull-right">Product description</div>

CSS :

#hack { height: 50px; }

@media (min-width: @screen-sm) {
    #desc { margin-top: -50px; }
}

Donc, la solution généralisée ici est d'ajouter des balises de piratage qui peuvent disparaître sur le mobile. Sur les tablettes+, les balises pirates permettent aux balises affichées d'apparaître plus tôt ou plus tard dans le flux, puis d'être tirées vers le haut ou vers le bas pour couvrir ces balises pirates.

Note : J'ai utilisé des hauteurs fixes pour les besoins de l'exemple simple dans le jsfiddle lié, mais le contenu réel du site sur lequel je travaillais varie en hauteur dans les 5 balises. Le rendu est correct avec une variation relativement importante de la hauteur des balises, en particulier image et desc.

Note 2 : En fonction de votre mise en page, il se peut que l'ordre des colonnes soit suffisamment cohérent sur les tablettes+ (ou les résolutions plus grandes) pour que vous puissiez éviter d'utiliser les balises de piratage, en utilisant les éléments suivants margin-bottom à la place, comme ça :

Note 3 : Il utilise Bootstrap 3. Bootstrap 4 utilise une grille différente et ne fonctionnera pas avec ces exemples.

http://jsfiddle.net/b9chris/52VtD/16632/

Answer 4

Octobre 2017

Je voudrais ajouter une autre solution Bootstrap 4. Une qui a fonctionné pour moi.

La propriété CSS "Order", associée à une requête média, peut être utilisée pour réorganiser les colonnes lorsqu'elles sont empilées sur des écrans plus petits.

Quelque chose comme ça :

@media only screen and (max-width: 768px) {
    #first {
        order: 2;
    }
    #second {
        order: 4;
    }
    #third {
        order: 1;
    }
    #fourth {
        order: 3;
    }
}

Lien CodePen : https://codepen.io/preston206/pen/EwrXqm

Ajustez la taille de l'écran et vous verrez les colonnes s'empiler dans un ordre différent.

Je vais rattacher cette question à celle de l'auteur de la première affiche. Avec CSS, la barre de navigation, la barre latérale et le contenu peuvent être ciblés, puis les propriétés d'ordre appliquées dans une requête média.

Answer 5

En Bootstrap 4 si vous voulez faire quelque chose comme ça :

    Mobile  |   Desktop
-----------------------------
    A       |       A
    C       |   B       C
    B       |       D
    D       |

Vous devez inverser l'ordre des B puis C puis appliquer order-{breakpoint}-first a B . Et appliquez deux paramètres différents, l'un qui leur fera partager les mêmes colonnes et l'autre qui leur fera prendre toute la largeur des 12 colonnes :

• Écrans plus petits : 12 cols à B et 12 cols à C

• Écrans plus grands : 12 cols entre la somme des deux ( B + C \= 12)

Comme ceci

<div class='row no-gutters'>
    <div class='col-12'>
        A
    </div>
    <div class='col-12'>
        <div class='row no-gutters'>
            <div class='col-12 col-md-6'>
                C
            </div>
            <div class='col-12 col-md-6 order-md-first'>
                B
            </div>
        </div>
    </div>
    <div class='col-12'>
        D
    </div>
</div>

Démonstration : https://codepen.io/anon/pen/wXLGKa