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

Question

[DomowDenis]

Здравствуйте.
Начал знакомство с 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>

С мелкими разрешениями меня все устраивает, я получил что хотел, изменяя порядок

на md и lg хочу получить что-то типа этого


Это реально сделать?Не могу найти решение

Comments

[Froggyweb]

order-xl-2 order-lg-1 order-md-1 order-sm-2 order-2 mb-2 align-items-center justify-content-start .mr-auto

с такими классами на мой взгляд лучше завязывать это ад
если использовать, то только базовую сетку - остальное треш в который не упрощает верстку, а делает из нее одноразовый ад

по макету на флексе можно сделать, но нижняя линия будет зависеть от содержимого.
либо будет фиксированное значение высоты всего блока.

[DomowDenis]

Froggyweb, ну..
Мне эта простыня тоже не особо нравится, но пытаюсь исп. функционал бустрапа. И каких то вариантов кроме как исп. offset я пока не вижу (да и в этом варианте не уверен).

По флексу - я так понимаю - играть нужно с order, flex и flex-direction? Верно?
В любом случае, спс за помощь, буду эксперементировать

[Froggyweb]

DomowDenis, order - да, но дальше силами только бутстрапа -никак на мой взгляд

Answer 1

[Арсений Матыцин]

1. Нет, справа элементы вложены в другой. А порядок рассчитывается на одном уровне.
1.1 Если бросить идею зачем-то менять порядок, если 2 все равно идет в начале, то просто вложи «правые» элементы внутрь еще одного и уже в них управляй порядком в респонсиве.
2. Если использовать какой-нить masonry, то можно попытаться.
3. Лучше заюзать гриды для таких перестанов.