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
  • Вопрос задан
  • 2700 просмотров
Решения вопроса 2
@antonowano
Профессиональный самоучка
посмотри как сделано в uikit flex
Ответ написан
Комментировать
andykov
@andykov
Shit happens
Для такой сетки используйте masonry.desandro.com либо flexbox, в нем есть полезное свойство order которое перемещает элементы, при этом разметка может быть какой угодно.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
div. Ставрополь
от 50 000 до 120 000 ₽
Rocket Смоленск
от 80 000 до 130 000 ₽
move2usajobs LLC Лос-Анджелес
от 2 000 до 4 000 $