Задать вопрос
@DomowDenis

Работа с сеткой boostrap4?

Здравствуйте.
Начал знакомство с boostrap4 и flexbox-элементами, и пытаюсь решить задачку.

У меня есть 4 блока.
<div class="row">
            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 order-xl-2 order-lg-1 order-md-1 order-sm-2 order-2">
                <div class="img">1</div>
            </div>
            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 order-xl-1 order-lg-2 order-md-2 order-sm-1 order-1">
                <div class="title">2</div>
            </div>
            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 order-xl-3 order-lg-3 order-md-3 order-sm-3 order-3">
                <div class="description">3</div>
            </div>
            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 order-xl-4 order-lg-4 order-md-4 order-sm-4 order-4">
                <div class="action">4</div>
            </div>
        </div>


С мелкими разрешениями меня все устраивает, я получил что хотел, изменяя порядок
5e5e7dfbc63b0445504236.png
на md и lg хочу получить что-то типа этого
5e5e7e0d118d1533423663.png

Это реально сделать?Не могу найти решение
  • Вопрос задан
  • 72 просмотра
Подписаться 1 Простой 3 комментария
Пригласить эксперта
Ответы на вопрос 1
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
Руководитель frontend направления, предприниматель
1. Нет, справа элементы вложены в другой. А порядок рассчитывается на одном уровне.
1.1 Если бросить идею зачем-то менять порядок, если 2 все равно идет в начале, то просто вложи «правые» элементы внутрь еще одного и уже в них управляй порядком в респонсиве.
2. Если использовать какой-нить masonry, то можно попытаться.
3. Лучше заюзать гриды для таких перестанов.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
ITK academy Нижний Новгород
от 80 000 до 120 000 ₽
Love.ru Пермь
от 100 000 ₽
DigitalHR Ереван
от 120 000 до 180 000 ₽