thisishappi
@thisishappi
Верстальщик=)

Верстка адаптива или как менять блоки местами?

Допустим имеем следущую разметку:

<div id="container">
		<div class="box big b1">1</div>
		<div class="box small b2">2</div>
		<div class="box small b3">3</div>
		<div class="box small b4">4</div>
		<div class="box wide b5">5</div>
		<div class="box small b6">6</div>
		<div class="box small b7">7</div>
		<div class="box small b8">8</div>
		<div class="box small b9">9</div>
		<div class="box small b10">10</div>
		<div class="box small b11">11</div>
		<div class="box wide b12">12</div>
		<div class="box small b13">13</div>
		<div class="box small b14">14</div>
		<div class="box small b15">15</div>
	</div>

#container {
	width: 100%;
	padding-top: 20px;
}
.box {
	float: left;
	margin-right: 20px;
	margin-bottom: 22px;
	background: #aaa;
}
.big {
	width: 520px;
	height: 632px;
}
.small {
	width: 250px;
	height: 305px;
}
.wide {
	width: 520px;
	height: 305px;
}

bmokK0DcEE7xmy.jpg
Каким образом можно поменять блоки 2-3 на 5 и тд при переходе на "мобильную"?
J2b9zD0uLLN3m6.jpg
  • Вопрос задан
  • 2257 просмотров
Решения вопроса 2
andykov
@andykov
Shit happens
Для такой сетки используйте masonry.desandro.com либо flexbox, в нем есть полезное свойство order которое перемещает элементы, при этом разметка может быть какой угодно.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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