Здесь ответы работают только для 2 ячеек, но как только в этих столбцах будет больше столбцов, это может немного усложнить задачу. Я думаю, что нашел обобщенное решение для любого количества ячеек в нескольких столбцах.
#Goals Получите вертикальную последовательность тегов на мобильном устройстве, чтобы расположить их в любом порядке, который требуется для дизайна на планшете / рабочем столе. В этом конкретном примере один тег должен войти в поток раньше, чем обычно, а другой - позже, чем обычно.
## Mobile
[1 headline]
[2 image]
[3 qty]
[4 caption]
[5 desc]
## Tablet +
[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 captions; потому что правые 2 ячейки настолько короткие, 2 imageчто слева, как правило, длиннее, чем обе они вместе взятые. Bootstrap Сетка является прославленным поплавок хак, смысл 4 caption есть float: left. С 2 imagesзанимать столько места слева, 4 captionпопытки вписаться в следующем доступном пространстве - часто в правой колонке, а не левую , где мы хотели.
Решение здесь (и в более общем плане для любой проблемы, подобной этой) состояло в том, чтобы добавить хак-тег, скрытый на мобильном телефоне, который существует на планшете +, чтобы вытолкнуть заголовок, который затем покрывается отрицательным полем - вот так:
[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; }
}
Итак, обобщенным решением здесь является добавление хак-тегов, которые могут исчезнуть на мобильном телефоне. На планшете + хак, теги позволяют отображаемым тегам появляться раньше или позже в потоке, а затем подтягиваются или опускаются, чтобы скрыть эти теги взлома.
Примечание: я использовал фиксированную высоту для простого примера в связанном jsfiddle, но фактическое содержание сайта, над которым я работал, варьируется по высоте во всех 5 тегах. Он отображается правильно с относительно большой разницей в высотах тегов, особенно изображения и изображения.
Примечание 2: В зависимости от вашего макета у вас может быть достаточно последовательный порядок столбцов на планшете + (или с более высоким разрешением), чтобы вы могли избежать использования взломанных тегов, используя margin-bottomвместо этого, например, так:
Примечание 3: здесь используется Bootstrap 3. Bootstrap 4 использует другой набор сетки и не будет работать с этими примерами.
http://jsfiddle.net/b9chris/52VtD/16632/