Comment modifier Bootstrap 3 colonnes sur la présentation mobile?
Je fais une mise en page réactive avec une barre de navigation fixe supérieure. En dessous, j'ai deux colonnes, une pour la barre latérale (3) et une pour le contenu (9). Qui sur le bureau ressemble à ceci
barre de navigation
[3] [9]
Lorsque je resize pour déplacer le navbar est compressé et masqué, la barre latérale est alors empilée au-dessus du contenu, comme ceci:
barre de navigation
[3]
[9]
Je voudrais le contenu principal en haut, donc je dois changer l'ordre sur mobile pour ceci:
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 indiquer que la solution ne s'applique pas à la version actuelle de Bootstrap.
Comment puis-je réorganiser ces colonnes sur mobile? Ou bien, comment puis-je insérer le groupe de listes de la barre latérale dans ma barre de navigation en expansion?
Voici mon code:
<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-->
Vous ne pouvez pas modifier l'ordre des colonnes sur des écrans plus petits, mais vous pouvez le faire sur des écrans plus grands.
Alors changez 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.
Donc, dans le contenu principal mobile est affiché en premier.
En utilisant col-lg-Push et col-lg-pull, nous pouvons réorganiser les colonnes sur de grands écrans et afficher la barre latérale à gauche et le contenu principal à droite.
Travailler violon ici .
Mis à jour en 2018
Pour la question originale basée sur Bootstrap 3 , la solution consistait à utilisez Push-pull .
Dans Bootstrap 4 il est maintenant possible de changer l'ordre, même lorsque les colonnes sont empilées sur toute la largeur verticalement, grâce à Bootstrap 4 flexbox. OFC, la méthode Push-Pull fonctionnera toujours, mais il existe maintenant d'autres moyens de modifier l'ordre des colonnes dans Bootstrap 4, ce qui permet de réorganiser les colonnes pleine largeur.
Méthode 1 - Utilisez flex-column-reverse pour les écrans xs:
<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 - Utilisez order-first pour les écrans xs:
<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 3.x originale
Pour la question originale basée sur Bootstrap 3 , la solution consistait à utilisez Push-pull pour les largeurs supérieures, puis les colonnes indiqueront leur ordre naturel sur des largeurs plus petites (xs). (A-B inverse à 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 déclaré, " Vous ne pouvez pas modifier l'ordre des colonnes dans des écrans plus petits mais vous pouvez le faire dans des écrans plus grands ". Toutefois, cela devrait être clarifié pour indiquer: "Vous ne pouvez pas modifier l’ordre des colonnes pleine largeur (---)" .. "dans Bootstrap 3.
Les réponses ici ne fonctionnent que pour 2 cellules, mais dès que ces colonnes ont plus en elles, cela peut conduire à un peu plus de complexité. Je pense avoir trouvé une solution généralisée pour un nombre quelconque de cellules dans plusieurs colonnes.
Buts
Obtenez une séquence verticale de balises sur le mobile afin de les organiser dans l'ordre de votre choix sur tablette/ordinateur de bureau. Dans cet exemple concret, une balise doit entrer dans le flux plus tôt que d'habitude, et une autre plus tard que d'habitude.
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 mélangé directement sur tablette +, et techniquement, il en va de même - il se trouve au-dessus de la légende qui le précède sur mobile. Vous verrez dans un instant 4 légende est en difficulté aussi.
Supposons que chaque cellule puisse varier en hauteur et doit être alignée de haut en bas avec la cellule suivante (en éliminant les astuces faibles comme un tableau).
Comme pour tous les Bootstrap Problèmes de grille, l'étape 1 consiste à réaliser que le code HTML doit figurer dans l'ordre mobile, 1 2 3 4 5, sur la page. Ensuite, déterminez comment obtenir une tablette/un ordinateur de bureau pour se réorganiser de cette manière - idéalement sans Javascript.
La solution pour obtenir 1 headline et 3 qty s'asseoir à droite et non à gauche est tout simplement de les définir tous les deux pull-right. Cela s'applique à CSS float: right, ce qui signifie qu'ils trouvent le premier espace libre qu’ils placent à droite. Vous pouvez imaginer que le processeur CSS du navigateur fonctionne dans l'ordre suivant: 1 correspond au coin supérieur droit. 2 est le suivant et est régulier (float: left), il va donc dans le coin supérieur gauche. Puis 3, qui est float: right, il saute par-dessus 1.
Mais cette solution ne suffisait pas pour 4 caption; parce que les 2 cellules de droite sont si courtes 2 image à gauche a tendance à être plus longue que les deux combinées. Bootstrap La grille est un hack flottant glorifié, ce qui signifie que 4 caption est float: left. Avec 2 image occupant tellement de place à gauche, 4 caption tente de tenir dans le prochain espace disponible - souvent la colonne de droite, pas la gauche où nous le souhaitions.
La solution ici (et plus généralement pour tout problème de ce type) consistait à ajouter une balise de hack cachée sur le mobile, qui existe sur la tablette + pour Transférer la légende, puis se recouvrir d’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; }
}
La solution généralisée consiste donc à ajouter des balises de hack qui peuvent disparaître sur le mobile. Sur tablette + les balises de hack 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 le bas pour couvrir ces balises de hack.
Remarque: J'ai utilisé des hauteurs fixes pour illustrer l'exemple simple du jsfiddle lié, mais le contenu du site sur lequel je travaillais varie en hauteur. dans tous les 5 tags. Le rendu est correct avec une variance relativement importante de la hauteur des tags, en particulier image et desc.
Remarque 2: En fonction de votre présentation, vous pouvez disposer d'un ordre de colonne suffisamment cohérent sur la tablette + (ou de résolutions plus grandes) pour éviter l'utilisation de balises de hack. , en utilisant margin-bottom à la place, comme suit:
Remarque 3: Ceci utilise Bootstrap 3. _ Bootstrap 4 utilise un jeu de grille différent et ne le fera pas. travailler avec ces exemples.
octobre 2017
J'aimerais ajouter une autre solution Bootstrap 4. Celui qui a fonctionné pour moi.
La propriété CSS "Order", associée à une requête multimédia, peut être utilisée pour réorganiser les colonnes lorsqu'elles sont empilées dans 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;
}
}
CodePen Link: 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 faire le lien avec la question de l'affiche originale. 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 multimédia.
Dans Bootstrap 4 , si vous voulez faire quelque chose comme ceci:
Mobile | Desktop
-----------------------------
A | A
C | B C
B | D
D |
Vous devez inverser l'ordre de B puis C puis appliquez order-{breakpoint}-first à B. Et appliquez deux paramètres différents, l'un qui leur fera partager les mêmes cols et l'autre qui leur fera prendre toute la largeur des 12 cols:
Écrans plus petits: 12 colonnes à B et 12 colonnes à C
Écrans plus grands: 12 colonnes entre leur somme (B + C = 12)
Comme ça
<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>
En commençant par la version mobile, vous pouvez réaliser ce que vous voulez, la plupart du temps.
Exemples ici:
http://jsbin.com/wulexiq/edit?html,css,output
<div class="container">
<h1>Push - PULL Bootstrap demo</h1>
<h2>Version 1:</h2>
<div class="row">
<div class="col-xs-12 col-sm-5 col-sm-Push-3 green">
IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
<hr> TOP ROW XS-SMALL SCREEN
</div>
<div class="col-xs-12 col-sm-4 col-sm-Push-3 gold">
TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
<hr> MIDDLE ROW ON XS-SMALL
</div>
<div class="col-xs-12 col-sm-3 col-sm-pull-9 red">
TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
<hr> BOTTOM ROW ON XS-SMALL
</div>
</div>
<h2>Version 2:</h2>
<div class="row">
<div class="col-xs-12 col-sm-4 col-sm-Push-8 yellow">
TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
<hr> TOP ROW ON XS-SMALL
</div>
<div class="col-xs-12 col-sm-4 col-sm-pull-4 blue">
TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
<hr> MIDDLE ROW XS-SMALL SCREEN
</div>
<div class="col-xs-12 col-sm-4 col-sm-pull-4 pink">
IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
<hr> BOTTOM ROW ON XS-SMALL
</div>
</div>
<h2>Version 3:</h2>
<div class="row">
<div class="col-xs-12 col-sm-5 cyan">
TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN TOP ROW ON XS-SMALL
</div>
<div class="col-xs-12 col-sm-3 col-sm-Push-4 orange">
TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
<hr> MIDDLE ROW ON XS-SMALL
</div>
<div class="col-xs-12 col-sm-4 col-sm-pull-3 brown">
IN THE MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
<hr> BOTTOM ROW XS-SMALL SCREEN
</div>
</div>
<h2>Version 4:</h2>
<div class="row">
<div class="col-xs-12 col-sm-4 col-sm-Push-8 darkblue">
TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
<hr> TOP ROW XS-SMALL SCREEN
</div>
<div class="col-xs-12 col-sm-4 beige">
MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
<hr> MIDDLE ROW ON XS-SMALL
</div>
<div class="col-xs-12 col-sm-4 col-sm-pull-8 silver">
TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
<hr> BOTTOM ROW ON XS-SMALL
</div>
</div>
</div>