Les réponses ici ne fonctionnent que pour 2 cellules, mais dès que ces colonnes en contiennent davantage, cela peut entraîner un peu plus de complexité. Je pense que j'ai trouvé une solution généralisée pour n'importe quel nombre de cellules dans plusieurs colonnes.
#Objectifs Obtenez une séquence verticale de balises sur mobile pour vous organiser dans l'ordre souhaité par le design sur tablette / bureau. Dans cet exemple concret, une balise doit entrer dans le flux plus tôt qu'elle ne le ferait normalement et une autre plus tard qu'elle ne le ferait normalement.
##Mobile
[1 headline]
[2 image]
[3 qty]
[4 caption]
[5 desc]
## Tablet +
[2 image ][1 headline]
[ ][3 qty ]
[ ][5 desc ]
[4 caption][ ]
[ ][ ]
Le titre doit donc être mélangé directement sur tablette +, et techniquement, il en va de même pour desc - il se trouve au-dessus de la balise de légende qui le précède sur mobile. Vous verrez dans un instant que 4 sous-titres est également en difficulté.
Supposons que chaque cellule puisse varier en hauteur et doit être alignée de haut en bas avec sa cellule suivante (excluant les astuces faibles comme un tableau).
Comme pour tous les problèmes de la grille d'amorçage, l'étape 1 consiste à réaliser que le code HTML doit être dans l'ordre mobile, 1 2 3 4 5, sur la page. Ensuite, déterminez comment obtenir une tablette / un ordinateur de bureau pour se réorganiser de cette manière - idéalement sans Javascript.
La solution pour obtenir 1 headline
et 3 qty
s'asseoir à droite, pas à gauche, est de simplement les régler tous les deux pull-right
. Cela s'applique au CSS float: right
, ce qui signifie qu'ils trouvent le premier espace ouvert qui leur convient. Vous pouvez penser que le processeur CSS du navigateur fonctionne dans l'ordre suivant: 1 s'inscrit dans le coin supérieur droit. 2 est le suivant et est régulier ( float: left
), il va donc dans le coin supérieur gauche. Puis 3, ce qui fait float: right
qu'il saute par-dessous 1.
Mais cette solution n'était pas suffisante pour 4 captions
; parce que les 2 cellules de droite sont si courtes 2 image
sur la gauche a tendance à être plus longue que les deux combinées. Bootstrap Grid est un hack flotteur glorifié, sens 4 caption
est float: left
. Avec 2 images
autant de place à gauche, 4 caption
tente de s'intégrer dans 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 tout problème comme celui-ci) était d'ajouter une balise de piratage, cachée sur mobile, qui existe sur la tablette + pour repousser la légende, qui est ensuite couverte par une marge négative - comme ceci:
[2 image ][1 headline]
[ ][3 qty ]
[ ][4 hack ]
[5 captions][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 solution généralisée consiste à ajouter des balises de hack qui peuvent disparaître sur mobile. Sur tablette + le hack, les balises permettent aux balises affichées d'apparaître plus tôt ou plus tard dans le flux, puis sont tirées vers le haut ou vers le bas pour couvrir ces balises de hack.
Remarque: J'ai utilisé des hauteurs fixes par souci d'exemple simple 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 variance relativement importante dans les hauteurs d'étiquette, en particulier l'image et la descente.
Remarque 2: Selon votre disposition, vous pouvez avoir un ordre de colonnes suffisamment cohérent sur la tablette + (ou des résolutions plus grandes), que vous pouvez éviter d'utiliser des balises de hack, en utilisant à la margin-bottom
place, comme ceci:
Remarque 3: cela utilise Bootstrap 3. Bootstrap 4 utilise un ensemble de grilles différent et ne fonctionnera pas avec ces exemples.
http://jsfiddle.net/b9chris/52VtD/16632/