web-dev-qa-db-fra.com

Bootstrap right Colonne en haut sur la vue mobile

J'ai une page Bootstrap comme celle-ci:

<div class="row">
    <div class="col-md-6">
        A
    </div>
    <div class="col-md-6">
       B
    </div>
</div>

Ressemble à:

-----
|A|B|
-----

Donc, si je le regarde sur un appareil mobile, la colonne A est en haut, mais je veux le B en haut ... Est-ce possible? .

htmlcsstwitter-bootstrap-3
152
schnawel007

Utilisez Ordre des colonnes pour ce faire. Voir également cet article sur le classement des colonnes

col-md-Push-6 "poussera" la colonne à droite 6 et col-md-pull-6 "tirera" la colonne à gauche sur "md" ou une vue plus grande. Sur toutes les vues plus petites, les colonnes seront à nouveau en ordre normal.

Je pense que ce qui rebute les gens, c'est que vous devez mettre B au dessus de A dans votre code HTML. Il peut y avoir une façon différente de faire cela où A peut aller au-dessus de B dans le code HTML, mais je ne sais pas comment le faire ...

DEMO

<div class="row">
  <div class="col-md-6 col-md-Push-6">B</div>
  <div class="col-md-6 col-md-pull-6">A</div>
</div>

view-port> = md

|A|B|

view-port <md

|B|
|A|
246
Schmalzy

Il est à noter que si vous utilisez des colonnes qui ne sont pas toutes deux égales à 6, le montant du push ne sera pas égal à la taille de la colonne initiale.

Si vous avez 2 colonnes (A et B) et souhaitez que la colonne A soit plus petite et à droite sur les fenêtres "sm" ou supérieures, mais au-dessus d'une fenêtre de mobile (xs), vous utiliserez:

<div class="row">
    <div class="col-sm-4 col-sm-Push-8">A</div>
    <div class="col-sm-8 col-sm-pull-4">B</div>
</div>

Sinon, l'alignement des colonnes apparaîtra.

73
apritch

Flexbox Direction

Pour Bootstrap 4, appliquez l’un des éléments suivants sur votre div .row:

.flex-row-reverse

Pour les paramètres réactifs:

.flex-sm-row-reverse
.flex-md-row-reverse
.flex-lg-row-reverse
.flex-xl-row-reverse
21
salmanhijazi

Le code ci-dessous fonctionne pour moi 

.row {
    display: flex;
    flex-direction: column-reverse;
}
5
Sword I

Dans Bootstrap 4, supposons que vous souhaitiez avoir un ordre pour les grands écrans et un ordre différent pour les écrans plus petits:

<div class="container">
  <div class="row">
    <div class="col-6 order-1 order-lg-2">
      This column will be ordered second on large to extra large screens
    </div>
    <div class="col-6 order-2 order-lg-1">
      This column will be ordered first on large to extra large screens
    </div>
  </div>
</div>

Vous pouvez omettre order-1 et order-2 ci-dessus. Juste ajouté pour plus de clarté. L'ordre par défaut sera l'ordre dans lequel les colonnes apparaissent dans le code HTML.

Pour plus d'informations https://getbootstrap.com/docs/4.1/layout/grid/#reordering

3
Abram

Ceci est maintenant fait (dans Bootstrap v4) en ajoutant des classes order-#.

Voir https://getbootstrap.com/docs/4.1/migration/#grid-system-1

Comme ça:

<div classname='col-md-8 order-2`>...</div>
<div classname='col-md-4 order-1`>...</div>
2
Onno Faber

J'ai utilisé:

.row {
   display: flex;
   flex-direction: row-reverse;
}
1
Eric Conner

J'ai trois bootstrap 4 colonnes de tailles différentes. Au fur et à mesure que l'écran se réduit, la troisième colonne est masquée, puis lorsque l'écran devient plus petit et que les div sont empilées, l'ordre change afin que la colonne 2 soit en haut.

    <div class="col-xs-12 col-sm-4 col-md-3 order-2 order-sm-1">
        <h3>LEFT HAND SECTION</h3>
        <p>For news, links photos or comments.</p>
    </div>
    <div class="col-xs-12 col-sm-8 col-md-5 order-1 order-sm-2">
        <h3>MAIN SECTION</h3>
        <p>The main content for the page.</p>
    </div>
    <div class="col-xs-12 col-md-4 d-none d-md-block order-last">
        <h3>BLANK SECTION</h3>
        <p>Will usually just be blank.</p>
    </div>

J'espère que ça aide. J'ai eu du mal à comprendre cela, mais je suis finalement arrivé à l'aide de ce fil, mais c'était un peu hasardeux.

0
M61Vulcan

Dans Bootstrap V4 (Paru le 18 janvier 2018) Vous pouvez utiliser les classes de réorganisation. Infos ici sous l'onglet Réorganisation.

https://getbootstrap.com/docs/4.0/layout/grid/

0
Juan Mireles II

Cela a fonctionné pour moi sur Bootstrap 4:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 order-md-last">
      <%= render 'form'%>
    </div>
    <div class="col-md-8 order-md-first">
      CONTENT
    </div>
  </div>
</div>
0
tomb

Bootstrap 4 comprend des classes pour flex. Voir: https://getbootstrap.com/docs/4.3/layout/utilities-for-layout/

<div class="row flex-column-reverse flex-md-row">
    <div class="col-sm-10">
        Col 1
    </div>
    <div class="col-sm-2">
       Col 2
    </div>
</div>
0
heady12