Как сделать на flexbox чтобы при сжатии страницы 3 div меняли расположение

Question

Как сделать на flexbox чтобы при сжатии страницы 3 div меняли расположение

Максимум Удовольствия Ученик (119), закрыт 1 год назад

Необходимо как на картинке изменить расположение дивов для мобильной версии
Именно правый блок становится в мобильной версии вторым

Answer 1

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

 .box{ 
	display: flex; 
	flex-wrap: wrap; 
	justify-content: center; 
} 
.container{ 
	display: flex; 
	flex-direction: column; 
} 
.block{ 
	width: 500px; 
	height: 200px; 
} 
.block1{ 
	background: #f00; 
	order: 1; 
} 
.block2{ 
	background: #ff0; 
	order: 2; 
} 
.block3{ 
	background: #f0f; 
	order: 3; 
	height: 400px; 
} 
@media (max-width: 600px) { 
	.container { 
	    display: contents; 
	} 
	.block1{ 
		background: #f00; 
		order: 1; 
	} 
	.block2{ 
		background: #ff0; 
		order: 3; 
	} 
	.block3{ 
		background: #f0f; 
		order: 2; 
		height: 200px; 
	} 
}

Answer 2

1 flex-align
2 CSS · Bootstrap
3 JS какой нибудь фреймворк вроде анагуляр реакт или нпм билдер

Answer 3

Александр Голофаев Мудрец (17492) 1 год назад

тут нужна сетка grid