HTML Grid system - порядок дел в мобильном представлении

Question

Я использую Bootstrap Grid System следующим образом: Grid System

Когда я отображаю это на мобильном телефоне, «.col-12 .col-md-8» всегда находится в первом ряду.

.col-12 .col-md-8

.col-6 .col-md-4

Как сделать ".col-6 .col-MD-4 "быть первым?

.col-6 .col-md-4

.col-12 .col-md-8

Спасибо!

Answer 1

Свойство CSS «Порядок» в сочетании с медиа-запросом можно использовать для изменения порядка столбцов, когда они располагаются на меньших экранах.

Примерно так:

@media only screen and (max-width: 768px) {
    #first {
        order: 2;
    }
    #second {
        order: 4;
    }
    #third {
        order: 1;
    }
    #fourth {
        order: 3;
    }
}

Вы можете заменить идентификаторы в моем коде вашими классами столбцов, такими как .col-6, но это будет применяться ко всему сайту. Вы можете не захотеть этого делать. Вот почему я оставил идентификаторы, такие как #first.

Answer 2

Просто используйте класс заказа начальной загрузки:

.col-12 .col-md-8 .order-2

.col-6 .col-md-4 .order-1

или

.col-12 .col-md-8 .order-last

.col-6 .col-md-4 .order-first

Здесь получите официальную ссылку: https://getbootstrap.com/docs/4.0/layout/grid/#reordering