Comment puis-je changer de Bootstrap 3 ordre des colonnes mobiles de mise en page?

Vous ne pouvez pas modifier l'ordre des colonnes dans les petits écrans, mais vous pouvez le faire dans de grands écrans.

Afin de changer l'ordre de vos colonnes.

<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>

<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>

Par défaut, il affiche le contenu principal en premier.

Donc dans le mobile principal, le contenu est affiché en premier.

En utilisant col-lg-push et col-lg-pull nous pouvons réorganiser les colonnes dans de grands écrans et affichage de la barre latérale sur la gauche et le contenu principal sur la droite.

De travail violon ici.

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 de tags sur mobile pour organiser eux-mêmes, dans l'ordre que la conception des appels pour sur tablette/ordinateur de bureau. Dans cet exemple, la balise doit entrer dans le flux plus tôt qu'à l'accoutumée, et un autre plus tard elle le ferait normalement.

Mobile

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

Tablette+

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

Donc titre doit shuffle à droite sur la tablette+, et techniquement, donc ne desc - il est assis au-dessus de la légende de la balise qui le précède sur mobile. Vous le verrez dans un instant 4 légende est aussi en difficulté.

Supposons que chaque cellule peut varier en hauteur, et doit être au ras de haut en bas avec sa cellule suivante (excluant la faiblesse des astuces comme une table).

Comme avec tous Bootstrap Grille problèmes de l'étape 1 consiste à réaliser le code HTML doit être dans mobile-commande, 1 2 3 4 5 dans la page. Ensuite, déterminer comment obtenir une tablette/desktop pour réorganiser lui-même de cette façon - idéalement sans Javascript.

La solution pour obtenir 1 headline et 3 qty de s'asseoir à la droite, pas la gauche est tout simplement de les mettre à la fois 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 de la CSS du navigateur processeur de travail dans l'ordre suivant: 1 correspond au coin en haut à droite. 2 est à côté et est régulière (float: left), donc, il va à l'angle supérieur gauche. Puis 3, qui est float: right de sorte qu'il saute par-dessus les sous 1.

Mais cette solution n'est pas assez pour 4 caption; parce que le droit à 2 cellules sont si courtes 2 image sur la gauche tend à être plus longue que les deux combinés. Bootstrap Grille est une simple flotteur hack, sens 4 caption est float: left. Avec 2 image occupant 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 de tout problème de ce genre) a été d'ajouter un hack tag, caché sur mobile, qui existe sur la tablette+ de pousser la légende, que puis est couverte 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; }
}

Ainsi, la généralisation de solution ici est d'ajouter hack tags qui peut disparaître sur mobile. Sur la tablette+ le hack tags permettent affiche les balises apparaissent plus tôt ou plus tard dans le flux, puis obtenir tiré vers le haut ou vers le bas pour couvrir ces hack tags.

Remarque: j'ai utilisé des hauteurs fixes pour le bien de l'exemple simple dans la jsfiddle, mais le contenu du site que je travaillais sur la varie en fonction de la hauteur à tous les 5 balises. Il s'affiche correctement avec relativement importante de la variance dans le tag hauteurs, en particulier de l'image et du desc.

Note 2: en Fonction de votre mise en page, vous pouvez avoir une assez cohérent colonne de commande sur tablette+ (ou plus résolutions), que vous pouvez éviter l'utilisation de hack des balises, à l'aide de margin-bottom au lieu de cela, comme ceci:

Note 3: il utilise Bootstrap 3. Bootstrap 4 utilise une autre grille de jeu, et ne fonctionne pas avec ces exemples.

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

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

    Mobile  |   Desktop
-----------------------------
    A       |       A
    C       |   B       C
    B       |       D
    D       |

Vous avez besoin pour inverser l'ordre de B puis C puis appliquer order-{breakpoint}-first à B. Et appliquer deux réglages différents, l'un qui va leur faire partager les mêmes cols et les autres qui vont leur faire prendre toute la largeur de l'12 cols:

• Les petits écrans: 12 cols à B et 12 cols à C

• De plus grands écrans: 12 cols entre la somme de leur (B + C = 12)

Comme ce

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

Démo: 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>

JS:

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

Que simple

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

JS:

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

exemple
https://jsfiddle.net/w9n27k23/