@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

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

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

Войти через центр авторизации
Похожие вопросы