Адаптивная верстка без медиа запросов

Интересный способ преобразования колонок в строки с помощью flexbox без медиа запросов.

Например, на широком экране отображаются три колонки, на узком — одна.

.container {
	margin: 1rem auto;
	max-width: 900px;
	flex-wrap: wrap;
	display: flex;
}

.cell {
	box-sizing: border-box;
	max-width: 100%;
	min-width: 33%;
	flex-grow: 1;
	flex-basis: calc((40rem - 100%) * 999);
	padding: 0.5rem;
	color: #fff;
}

.cell:before {
	border-radius: 3px;
	background: #333;
	display: block;
	content: " ";
	height: 5rem;
}

<div class="container">
	<div class="cell"></div>
	<div class="cell"></div>
	<div class="cell"></div>
	<div class="cell"></div>
	<div class="cell"></div>
	<div class="cell"></div>
</div>

Результат (поизменяйте ширину браузера)