Как сверстать адаптивный Z-паттерн на Bootstrap 4?

Question

[Андрей]

Понесла меня нелегкая верстать собственный новый сайт на Bootstrap 4 вместо 3-го, который хорошо знаю несколько лет. Как и бывает в подобных ситуациях - вместо быстрого наскока с шашкой наголо, вынужденно проводишь до 90% времени на проект гугля и изучая документацию по новому для себя продукту.

Вот z-паттерн, кто не понял, в 2-х вариантах (некоторые называют его "как у apple" ))):



Вот реально рабочая секция на Вootstrap 3:

<div class="row">
	<div class="col-md-5 col-sm-5">
		<img src="" alt="" class="img-responsive">
	</div>
	<div class="col-md-7 col-sm-7">
		<p>Текстовка</p>
	</div>
</div>
<hr />
<div class="row">
	<div class="col-md-5 col-sm-5 col-md-push-7 col-sm-push-7 col-xs-push-0">
		<img src="" alt="" class="img-responsive">
	</div>
	<div class="col-md-7 col-sm-7 col-md-pull-5 col-sm-pull-5 col-xs-pull-0">
		<p>Текстовка</p>
	</div>
</div>

Решение онованно на "тяни-толкай" классах pull и push. В Bootstrap 4 я не обнаружил ничего подобного!

Вопрос как сверстать это на 4-ке?

Answer 1

[Andrej Sharapov]

Посмотрите здесь https://getbootstrap.com/docs/4.0/examples/carousel/ секция featurette. Это ищете?
И одинаковые см/мд ставить нет смысла. Вы можете задать минимальный экран и от него двигаться. Например, кол-лг-3 кол-мд-12. А вообще, бутстрап зло, которое губит навыки)

Comments

[Андрей]

ОК, очень похоже. Буду пробовать.
P.S.: верстка не совсем мой основной навык - портить нечего. Только для себя верстаю на быструю без излишнего перфекционизма )))

Answer 2

[Андрей]

В Bootstrap 4 я не обнаружил ничего подобного!

https://getbootstrap.com/docs/4.1/utilities/flex/#order

Comments

[Андрей]

Весьма, скорее всего так флекс блоки и сортируются.