Déplacer div du haut vers le bas sur mobile

Puis-je faire cela de manière native avec bootstrap? Je suis l'aide de la version 4 (en alpha), mais si il fonctionne sur la version 3, il devrait fonctionner sur la v4.

J'ai 2 divs à l'intérieur d'une colonne comme

<div class="row">
    <div class="col-xs-12">
        <div>TOP ON DESKTOP, BOTTOM ON MOBILE</div>
        <div>BOTTOM ON DESKTOP, TOP ON MOBILE</div>
    </div>
</div>

Est-il un moyen que je puisse obtenir les divs pour échanger autour de sur un appareil mobile? Je ne veux pas utiliser le code javascript ici, je voudrais utiliser "bootstrap" classes uniquement, si possible.

Si il n'est pas possible avec bootstrap, puis css seulement s'il vous plaît.

InformationsquelleAutor Gillardo | 2015-10-21
  1. 20

    Pas au courant d'une façon d'atteindre cet objectif en utilisant bootstrap mais il peut être fait à l'aide de CSS' flexbox.

    • Ajouter un nouveau sélecteur .col-xs-12 avec les propriétés suivantes:
      • display: flex; dit aux enfants d'utiliser le flexbox modèle
      • flex-direction: column-reverse; permettra de s'assurer que les enfants de flux de bas en haut (au lieu de la valeur par défaut de gauche à droite)

    Exécuter l'Extrait de code ci-dessous en plein écran et de redimensionner la fenêtre pour voir l'ordre des éléments de changement.

    CSS:

    @media only screen and (max-width: 960px) {
  .col-xs-12 {
    display: flex;
    flex-direction: column-reverse;
  }
}

    HTML:

    <div class="row">
    <div class="col-xs-12">
        <div>TOP ON DESKTOP, BOTTOM ON MOBILE</div>
        <div>BOTTOM ON DESKTOP, TOP ON MOBILE</div>
    </div>
</div>

    InformationsquelleAutor Hidden Hobbes
  2. 2

    Le code suivant fonctionne pour moi: 

    <div class="row">
  <div class="col-xs-12 xs-column-reverse">
    <div>TOP ON DESKTOP, BOTTOM ON MOBILE</div>
    <div>BOTTOM ON DESKTOP, TOP ON MOBILE</div>
  </div>
</div>

 @media only screen and (max-width: 768px) {
  .xs-column-reverse {
    display: flex;
    flex-direction: column-reverse;
  }
}
    InformationsquelleAutor Sword I
  3. 0
    .col-xs-12 { height: 200px; position:relative; }
.col-xs-12 div { position:absolute; top:0; left: 0; width:100%; }
.col-xs-12 div:last-child { top: auto; bottom: 0; }

@media (max-width: 480px) {
    .col-xs-12 div { top:auto; bottom:0; }
    .col-xs-12 div:last-child { top: 0; bottom: auto; }
}
    InformationsquelleAutor Viktor Maksimov