Comment modifier l'ordre des colonnes Bootstrap 3 sur la mise en page 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 une barre latérale (3) et une pour le contenu (9). Qui sur le bureau ressemble à ceci

navbar
[3] [9]

Lorsque je resizemobile navbarest compressé et masqué, la barre latérale est empilée au-dessus du contenu, comme ceci:

navbar
[3]
[9]

Je voudrais que le contenu principal soit en haut, je dois donc changer l'ordre sur mobile en ceci:

navbar
[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 réorganiser ces colonnes sur mobile? Ou bien, comment puis-je placer le groupe de listes sidbar 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 de grands écrans.

Modifiez 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, cela affiche d'abord le contenu principal.

Ainsi, dans le contenu principal mobile est affiché en premier.

En utilisant col-lg-pushet col-lg-pullnous pouvons réorganiser les colonnes sur de grands écrans et afficher la barre latérale à gauche et le contenu principal à droite.

Travailler violon ici .

Mise à jour 2018

Pour la question d' origine basée sur Bootstrap 3 , la solution était d' utiliser le push-pull .

Dans Bootstrap 4, il est désormais possible de changer l'ordre, même lorsque les colonnes sont empilées verticalement sur toute la largeur , grâce à la flexbox Bootstrap 4. OFC, la méthode push pull fonctionnera toujours, mais il existe maintenant d'autres façons de modifier l'ordre des colonnes dans Bootstrap 4, ce qui permet de réorganiser les colonnes pleine largeur.

Méthode 1 - Utilisation flex-column-reversepour les 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 - Utilisation order-firstpour les 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 la question d' origine basée sur Bootstrap 3 , la solution était d' utiliser le push-pull pour les plus grandes largeurs, puis les colonnes montreront leur ordre naturel sur des largeurs plus petites (xs). (AB inverse à BA).

<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 dans les petits écrans, mais vous pouvez le faire sur les grands écrans ". Cependant, cela doit être clarifié pour indiquer: "Vous ne pouvez pas modifier l'ordre des colonnes" empilées " pleine largeur .." dans Bootstrap 3.

Les réponses ici ne fonctionnent que pour 2 cellules, mais dès que ces colonnes en contiennent davantage, cela peut entraîner un peu plus de complexité. Je pense que j'ai trouvé une solution généralisée pour n'importe quel nombre de cellules dans plusieurs colonnes.

#Objectifs Obtenez une séquence verticale de balises sur mobile pour vous organiser dans l'ordre souhaité par le design sur tablette / 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]

## Tablet +

[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 pour desc - il se trouve au-dessus de la balise de légende qui le précède sur mobile. Vous verrez dans un instant que 4 sous-titres est également en difficulté.

Supposons que chaque cellule puisse varier en hauteur et doit être alignée de haut en bas avec sa cellule suivante (excluant les astuces faibles comme un tableau).

Comme pour tous les problèmes de la grille d'amorçage, l'étape 1 consiste à réaliser que le code HTML doit être 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 headlineet 3 qtys'asseoir à droite, pas à gauche, est de simplement les régler tous les deux pull-right. Cela s'applique au CSS float: right, ce qui signifie qu'ils trouvent le premier espace ouvert qui leur convient. Vous pouvez penser que le processeur CSS du navigateur fonctionne dans l'ordre suivant: 1 s'inscrit dans le 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, ce qui fait float: rightqu'il saute par-dessous 1.

Mais cette solution n'était pas suffisante pour 4 captions; parce que les 2 cellules de droite sont si courtes 2 imagesur la gauche a tendance à être plus longue que les deux combinées. Bootstrap Grid est un hack flotteur glorifié, sens 4 caption est float: left. Avec 2 imagesautant de place à gauche, 4 captiontente de s'intégrer dans l'espace disponible suivant - souvent la colonne de droite, pas la gauche où nous le voulions.

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

[2 image  ][1 headline]
[         ][3 qty     ]
[         ][4 hack    ]
[5 captions][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; }
}

Ainsi, la solution généralisée consiste à ajouter des balises de hack qui peuvent disparaître sur mobile. Sur tablette + le hack, les balises permettent aux balises affichées d'apparaître plus tôt ou plus tard dans le flux, puis sont tirées vers le haut ou vers le bas pour couvrir ces balises de hack.

Remarque: J'ai utilisé des hauteurs fixes par souci d'exemple simple dans le jsfiddle lié, mais le contenu réel du site sur lequel je travaillais varie en hauteur dans les 5 balises. Il rend correctement avec une variance relativement importante dans les hauteurs d'étiquette, en particulier l'image et la descente.

Remarque 2: Selon votre disposition, vous pouvez avoir un ordre de colonnes suffisamment cohérent sur la tablette + (ou des résolutions plus grandes), que vous pouvez éviter d'utiliser des balises de hack, en utilisant à la margin-bottomplace, comme ceci:

Remarque 3: cela utilise Bootstrap 3. Bootstrap 4 utilise un ensemble de grilles différent et ne fonctionnera pas avec ces exemples.

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

Octobre 2017

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

La propriété CSS "Order", combiné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;
    }
}

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

Ajustez la taille de l'écran et vous verrez que les colonnes sont empilées dans un ordre différent.

Je lierai cela à la question de l'affiche originale. Avec CSS, la barre de navigation, la barre latérale et le contenu peuvent être ciblés, puis ordonner les propriétés appliquées dans une requête multimédia.

Dans 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 de B puis C puis appliquer 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 cols à B et 12 cols à C

• Écrans plus grands: 12 cols entre la somme d'entre eux ( 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>

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

C'est assez facile avec jQuery utilisant insertAfter () ou insertBefore ().

<div class="left">content</div> <div class="right">sidebar</div>

<script>
$('.right').insertBefore('left');
</script>

C'est simple

si vous voulez définir la condition o pour les appareils mobiles, vous pouvez le faire comme ceci

<script>
  var $iW = $(window).innerWidth();
  if ($iW < 992){
     $('.right').insertBefore('.left');
  }else{
     $('.right').insertAfter('.left');
  }
</script>

exemple https://jsfiddle.net/w9n27k23/

En commençant par la version mobile en premier, 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>