Відповіді тут працюють лише для двох комірок, але як тільки цих стовпців буде більше в них, це може призвести до трохи більшої складності. Я думаю, що я знайшов узагальнене рішення для будь-якої кількості комірок у кількох стовпцях.
Цілі
Отримайте вертикальну послідовність тегів на мобільних пристроях, щоб розташувати їх у будь-якому порядку, який вимагає дизайн на планшеті / робочому столі. У цьому конкретному прикладі один тег повинен входити в потік раніше, ніж зазвичай, а інший пізніше, ніж зазвичай.
Мобільний
[1 headline]
[2 image]
[3 qty]
[4 caption]
[5 desc]
Планшет +
[2 image ][1 headline]
[ ][3 qty ]
[ ][5 desc ]
[4 caption][ ]
[ ][ ]
Тож заголовок потрібно перетасовувати прямо на планшеті +, а технічно це робить і desc - він розташовується над тегом підписів, який передує йому на мобільному пристрої. Ви побачите через мить 4 підписи теж у біді.
Припустимо, кожна клітинка може змінюватись по висоті, і її потрібно обмітати зверху донизу наступною коміркою (виключаючи слабкі хитрощі, як таблиця).
Як і у всіх проблемах Bootstrap Grid, крок 1 полягає в усвідомленні того, що HTML повинен бути у мобільному порядку 1 2 3 4 5 на сторінці. Потім визначте, як змусити планшетний ПК / робочий стіл переупорядкувати себе таким чином - в ідеалі без Javascript.
Рішення отримати 1 headlineта 3 qtyсісти праворуч, а не ліворуч - просто встановити їх обох pull-right. Це стосується CSS float: right, тобто вони знаходять перший відкритий простір, який вони помістять праворуч. Ви можете уявити, що CSS-процесор браузера працює в такому порядку: 1 підходить до правого верхнього кута. 2 - наступний і є регулярним ( float: left), тому він іде в лівий верхній кут. Тоді 3, тобто float: rightце перескакує під 1.
Але цього рішення було недостатньо для 4 caption; тому що права 2 клітини настільки короткі, 2 imageзліва мають тенденцію бути довшими, ніж обидві разом. Bootstrap Сітка є прославленим поплавок хак, сенс 4 caption є float: left. З 2 imageзаймати стільки місця зліва, 4 captionспроби вписатися в наступному доступному просторі - часто в правій колонці, а НЕ ліву , де ми хотіли.
Тут вирішенням (і загалом для будь-якої такої проблеми) було додати тег зламу, прихований на мобільному пристрої, який існує на планшеті + для виштовхування підписів, що потім покривається негативним запасом - як це:
[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; }
}
Отже, тут узагальнене рішення - додати теги хаків, які можуть зникати на мобільному пристрої. На планшеті + теги злому дозволяють відображаються теги відображатися раніше чи пізніше в потоці, а потім витягуються вгору або вниз, щоб приховати ці теги злому.
Примітка. Я використовував фіксовану висоту заради простого прикладу у пов'язаному jsfiddle, але фактичний вміст сайту, над яким я працював, різниться за висотою у всіх 5 тегах. Він відображається належним чином із відносно великою дисперсією у висотах тегів, особливо у зображенні та нахилі.
Примітка 2: Залежно від вашого макета, ви можете мати достатньо послідовний порядок стовпців на планшеті + (або більшій роздільній здатності), щоб уникнути використання тегів зламу, використовуючи margin-bottomнатомість так:
Примітка 3: Для цього використовується Bootstrap 3. Bootstrap 4 використовує інший набір сітки, і не буде працювати з цими прикладами.
http://jsfiddle.net/b9chris/52VtD/16632/