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

Интересный способ преобразования колонок в строки с помощью 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>

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