Разметка на флексах как реализовать конкретный макет?

Question

[Novamoscow]

у страницы есть правый сайт бар(с лева), далее контентная часть ( с права), и форма (с лева).
Сложность в том, что на мобилке все должно встать друг под другом. Сайт бар - контент - форма.

Comments

[Сергей delphinpro]

Проще и надежнее будет продублировать форму (в разметке или джаваскриптом клонировать) и сделать по старинке на флоатах.

Answer 1

[HelenaS]

<div class="wrapper">
	<div class="aside"></div>
	<div class="main"></div>
	<div class="form"></div>
</div>

<style>
	.wrapper {
		display: flex;
		flex-direction: row;
	}
	@media(min-width: 320px) and (max-width: 990px) {
		.wrapper {
			display: flex;
			flex-direction: column;
		}
	}
</style>

Comments

[Skrolea]

Можно еще order добавить, если нужно разный порядок (для column)

[Сергей delphinpro]

По умолчанию блоки и так выстроятся в столбик. Поэтому изначально не нужно флексить враппер

.wrapper {}
@media (min-width: 990px) {
  .wrapper {
    display: flex;
  }
}

[Novamoscow]

Колонка (правая) растягивает весь флекс контейнер и получается блок с почтой в самом низу

[HelenaS]

Novamoscow: на мобильной версии или на десктопной? задайте ширину в %