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

Question

[Сергей Софьичев]

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

<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;
}

Каким образом можно поменять блоки 2-3 на 5 и тд при переходе на "мобильную"?

Answer 1

[Иван Антонов]

посмотри как сделано в uikit flex

Answer 2

[Андрей Б.]

Для такой сетки используйте masonry.desandro.com либо flexbox, в нем есть полезное свойство order которое перемещает элементы, при этом разметка может быть какой угодно.

Comments

[Ярослав Алексеенко]

Flexbox не кросс-браузерное решение... А так отличный вариант.

[teotlu]

Ярослав Алексеенко: есть полифилл, в принципе.