Pourquoi mon Bootstrap push & tirez les divs ne fonctionne pas?

Je veux avoir 2 divs besides les uns des autres pour col-md and higher, tout en ayant leur above les uns des autres pour col-sm and lower. J'ai donc essayé d'utiliser le push et pull fonction comme indiqué dans les docs mais de toute façon ça ne fonctionne pas. Ce que j'essaie de faire est d'obtenir le DROIT div above la GAUCHE de la div sur le col-sm et inférieur, fondamentalement, l'inversion de l'ordre.

Ce que je fais mal?

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-sm-push-12 col-md-7">LEFT</div>
    <div class="col-sm-12 col-sm-pull-12 col-md-5">RIGHT</div>
  </div>
</div>

Ici un violon: https://jsfiddle.net/ko7euh77/1/

.col-sm-push-12 et .col-sm-pull-12 ne fonctionnera pas. Placez votre divs que vous souhaitez qu'ils apparaissent dans les petits écrans et ensuite pull & pousser. Vous pouvez trouver une solution here

OriginalL'auteur user1996496 | 2016-09-18

  1. 30

    Vous avez juste besoin de penser "mobile-première"..

    <div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-push-7 col-md-5">RIGHT</div>
    <div class="col-sm-12 col-md-pull-5 col-md-7">LEFT</div>
  </div>
</div>

    Démo: http://www.codeply.com/go/2SN4r7KGwV

    Bootstrap 4 Mise À Jour

    Le push-pull classe sont maintenant order-* (à l'aide de flexbox) dans le Bootstrap 4.

    https://www.codeply.com/go/l3BOOH6JM9

    <div class="row">
    <div class="col-md-5 order-md-2">
        <div class="card card-body">RIGHT</div>
    </div>
    <div class="col-md-7 order-md-1">
        <div class="card card-body">LEFT</div>
    </div>
</div>
    De bon sens! Merci 🙂
    pouvez-vous nous expliquer le code, veuillez sorte que les autres puissent savoir ce qu'ils font de mal.
    j'ai suivi votre démarche, mais encore mes boutons dans le code ne fonctionne pas .
    Vous devez créer la mise en page mobile d'abord, puis de l'ajuster au besoin pour des écrans plus grands. C'est expliqué plus ici: blog.codeply.com/2015/04/06/responsive-bootstrap-layouts
    Bootstrap changé entre v4 alpha 6 et latest 4.x merci pour l'aide.

    OriginalL'auteur Zim