Colonne de droite Bootstrap en haut sur la vue mobile

171

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? Je l'ai essayé avec push and pull, mais cela n'a pas fonctionné.

html css twitter-bootstrap-3 schnawel007
la source
2
Pour Bootstrap 4, voir la réponse de salmanhijazi
schnawel007

Réponses:

268

Utilisez l' ordre des colonnes pour ce faire.

col-md-push-6"poussera" la colonne vers la droite 6 et col-md-pull-6"tirera" la colonne vers la gauche sur les ports d'affichage "md" ou supérieurs. Sur tous les ports d'affichage plus petits, les colonnes seront à nouveau dans l'ordre normal.

Je pense que ce qui dérange les gens, c'est que vous devez mettre B au-dessus de A dans votre HTML . Il peut y avoir une manière différente de faire cela où A peut aller au-dessus de B dans le 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>

vue-port> = md

|A|B|

vue-port <md

|B|
|A|
Schmalzy
la source
6
@JackTheKnife Jetez un œil à l'autre réponse à cette question ... vous poussez ou tirez une colonne de la largeur de l'autre colonne.
Schmalzy
1
@Schmalzy O ouais - une autre réponse a une meilleure explication. Également trouvé utile: scotch.io/tutorials/reorder-css-columns-using-bootstrap
JackTheKnife
1
Avoir des problèmes avec trois colonnes, où l'ordre de la pile doit être au centre, à gauche, à droite.
Goose
78

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

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

<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 désactivé.

apritch
la source
Comment puis-je l'utiliser lorsque j'ai un décalage<div class="col-md-4 col-md-offset-1"></div><div class="col-md-6 col-md-offset-1"></div>
Muddasir Abbas
29

Direction de la Flexbox

Pour Bootstrap 4, appliquez l'un des éléments suivants à 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
salmanhijazi
la source
une idée comment réaliser la même chose dans vuetify?
Rakibul Haq
11

Dans Bootstrap 4, disons que vous voulez avoir une commande pour les grands écrans et un ordre différent pour les petits écrans:

<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-1et order-2au - dessus. Juste ajouté pour plus de clarté. L'ordre par défaut sera l'ordre dans lequel les colonnes apparaissent dans le html.

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

Abram
la source
10

Le code ci-dessous fonctionne pour moi 

.row {
    display: flex;
    flex-direction: column-reverse;
}
Épée I
la source
4

J'ai trois colonnes bootstrap 4 de tailles différentes. Au fur et à mesure que l'écran devient plus petit, la troisième colonne est masquée, puis lorsque l'écran devient encore plus petit et que les divs sont empilés, l'ordre change pour 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 j'y suis finalement arrivé avec l'aide de ce fil, mais c'était un peu hasardeux.

M61Vulcan
la source
3

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>
tombeau
la source
2

J'ai utilisé:

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