Les réponses ici, le travail, juste 2 cellules, mais dès que ces colonnes ont plus en eux, il peut conduire à un peu plus de complexité. Je crois que j'ai trouvé une solution généralisée pour n'importe quel nombre de cellules dans plusieurs colonnes.

Objectifs

obtenir une séquence verticale d'étiquettes sur mobile pour s'organiser dans n'importe quel ordre que le dessin appelle sur la tablette/bureau. Dans cet exemple concret, une étiquette doit entrer dans le flux plus tôt que normalement, et un autre plus tard elle le ferait normalement.

Mobile

[1 headline]
[2 image]
[3 qty]
[4 caption]
[5 desc]

comprimé+

[2 image  ][1 headline]
[         ][3 qty     ]
[         ][5 desc    ]
[4 caption][          ]
[         ][          ]

donc headline doit mélanger droit sur tablette+, et techniquement, il fait desc - il se trouve au-dessus de l'étiquette de légende qui le précède sur mobile. Vous verrez que la légende 4 a des ennuis.

supposons que chaque cellule peut varier en hauteur, et a besoin d'être rincé de haut en bas avec sa cellule suivante (ruling faible astuces comme une table).

comme pour tous les problèmes de Bootstrap Grid, l'étape 1 consiste à réaliser que le HTML doit être en mobile-order, 1 2 3 4 5, sur la page. Ensuite, déterminez comment obtenir tablette / bureau pour se réorganiser de cette façon-idéalement sans Javascript.

la solution pour obtenir 1 headline et 3 qty de s'asseoir à droite et non à gauche est de simplement les mettre tous les deux pull-right . Cela s'applique CSS float: right , ce qui signifie qu'ils trouvent le premier espace ouvert, ils vont s'adapter à la droite. Vous pouvez penser que le processeur CSS du navigateur fonctionne dans l'ordre suivant: 1 correspond au coin supérieur droit. 2 est le suivant et est régulier ( float: left ), donc il va dans le coin supérieur gauche. Puis 3, qui est float: right donc il saute plus en dessous de 1.

mais cette solution n'était pas suffisante pour 4 caption ; parce que les 2 cellules de droite sont si courtes 2 image sur la gauche a tendance à être plus long que les deux combinés. Bootstrap Grille est un hack flottant glorifié, qui signifie 4 caption est float: left . Avec 2 image qui occupent beaucoup de place sur la gauche, 4 caption tentatives pour s'adapter à 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 n'importe quelle question comme celle - ci) était d'ajouter une étiquette de piratage, cachée sur mobile, qui existe sur la tablette+ pour pousser la légende dehors, qui se couvre alors par une marge négative-comme ceci:

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

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

Note: j'ai utilisé des hauteurs fixes pour le simple exemple 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 variation relativement grande de la hauteur des balises, en particulier image et desc.

Note 2: en fonction de votre mise en page, vous pouvez avoir un ordre de colonne suffisamment cohérent sur la tablette+ (ou des résolutions plus grandes), que vous pouvez éviter l'utilisation d'étiquettes de piratage, en utilisant margin-bottom à la place, comme ceci:

Note 3: il utilise Bootstrap 3. Bootstrap 4 utilise une grille différente, et ne fonctionnera pas avec ces exemples.

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

mise à Jour 2018

pour le original question basée sur Bootstrap 3 , la solution était à utiliser push-pull pour les largeurs plus grandes, et puis les colonnes montreront est leur ordre naturel sur les plus petites (XS) largeurs. (A-B inversé en B-a).

<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 changer l'ordre des colonnes dans les petits écrans mais vous pouvez le faire dans les grands écrans ".

cependant, ceci devrait être clarifié pour indiquer: "vous ne pouvez pas changer l'ordre de pleine largeur "colonnes empilées .."dans le Bootstrap 3.

---

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

Méthode 1-Utilisez flex-column-reverse pour 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-Utiliser flex-first pour xs écrans (ou order-* dans 4.0.0) :

<div class="row">
    <div class="col-md-3">
        sidebar
    </div>
    <div class="col-md-9 flex-first flex-md-unordered">
        main
    </div>
</div>

Bootstrap 4 (alpha 6): http://www.codeply.com/go/bBMOsvtJhD

Bootstrap 4.0.0: https://www.codeply.com/go/e0v77yGtcr

octobre 2017

j'aimerais ajouter une autre solution Bootstrap 4. Un qui a fonctionné pour moi.

la propriété CSS" Order", combinée avec une requête média, peut être utilisée pour ré-ordonner des colonnes quand 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;
    }
}

CodePen Link: 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 vais relier ça à la question de l'affiche originale. Avec CSS, la barre de navigation, la barre latérale et le contenu peuvent être ciblés et ensuite commander des propriétés appliquées dans une requête média.

en commençant par la version mobile d'abord, vous pouvez obtenir ce que vous voulez, la plupart du temps.

exemples ici:

http://jsbin.com/wulexiq/edit?html,css, sortie

<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>

Dans Bootstrap 4 , si vous voulez faire quelque chose comme ceci:

    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 réglages différents, l'un qui les fera partager les mêmes cols et l'autre qui les fera prendre toute la largeur des 12 cols:

• plus petit écrans: 12 cols à B et 12 cols à c

• écrans plus grands: 12 couleurs entre la somme d'entre eux ( B + C = 12)

comme ceci

<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>

Demo: https://codepen.io/anon/pen/wXLGKa

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

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

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

simple

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

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

exemple https://jsfiddle.net/w9n27k23 /