css - на больших экранах, две колонки, на маленьких экранах одна колонка с динамической высотой

Question

Я хочу, чтобы данные из списка (на изображении) отображались в 2 или более столбцах, а контейнер должен иметь фиксированный размер для больших экранов и отображаться в одном столбце в контейнере с динамической высотой.Вот изображение:

Пробовал flexbox с фиксированной высотой и flex-direction:column по умолчанию и в медиа-запросе для width < 768, height: auto и flex-direction: row но не работает.Кто-нибудь поможет?

Answer 1

выглядит как простой flexbox, просто снимите фиксированную высоту на маленьких экранах

.flex {
  display: flex;
  flex-wrap: wrap;
  flex-direction:column;
  height: 200px;
}

.flex div {
  width: 100px;
  padding: 3px 10px;
}

@media screen and (max-width: 768px) {
  .flex { height: auto; }
}

<div class="flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
</div>