Блог

Я новичок в Bootstrap 4 и пытаюсь выяснить, как работают классы порядка. У меня есть этот макет, который включает

 ROW 1:
COL-MD-4 with 3 cards inside
COL-MD-8 with 2 cards inside
ROW 2:
COL-MD-12 with 1 card inside
 

  ________   ____________________________
|DIV1    | |DIV4                        |
|ROW1    | |ROW1                        |
|COL-MD-4| |COL-MD-8                    |
|CARD    | |CARD                        |
|        |  ----------------------------
|        |  ____________________________
|        | |DIV5                        |
|        | |ROW1                        |
|        | |COL-MD-8                    |
|        | |CARD                        |
 --------  |                            |
 ________  |                            |
|DIV2    | |                            |
|ROW1    | |                            |
|COL-MD-4| |                            |
|CARD    | |                            |
 --------  |                            |
 ________  |                            |
|DIV3    | |                            |
|ROW1    | |                            |
|COL-MD-4| |                            |
|CARD    | |                            |
|        | |                            |
|        | |                            |
 --------   ----------------------------
 _______________________________________
|DIV6                                   |
|ROW2                                   |
|COL-12                                 |
|CARD                                   |
|                                       |
|                                       |
|                                       |
 ---------------------------------------

 

И я пытаюсь на макете мобильных устройств изменить порядок разделов. Все divs будут COL-12, но я хочу, чтобы порядок был DIV4, DIV1, DIV5, DIV6, DIV2, DIV3.
Размер On -MD и выше DIV5 должен быть flex: 1, чтобы соответствовать нижнему пределу DIV3, вот почему я создал еще одну строку для DIV6. Если есть другой способ выполнить все это, я был бы рад узнать, как это сделать!

Спасибо

Демонстрация JSfiddle

Хотя в документации четко не указано, классы порядка, по-видимому, применяются только к родственным столбцам в пределах одной родительской строки. Вы можете использовать .order-last.order-md-first в первом столбце, чтобы поместить «DIV2» и «DIV3» последними на мобильном устройстве.

Чтобы выполнить ваши ограничения по переупорядочению «DIV1» в другой столбец, вам вместо этого потребуется иметь два экземпляра «DIV1», используя разные классы отображения ( .d-none.d-md-block amp; .d-md-none ) для переключения видимости.

Вот моя вилка для вашей скрипки, чтобы продемонстрировать.