С подсчетом столбцов, вы можете динамически изменить от 3 до 2 столбцов, если разрешение меньше?

Question

Я использую column-count свойство, чтобы установить страницу с несколькими div в трех столбцах, которая отлично смотрится на больших экранах. Каждый div имеет фиксированную ширину, скажем, 500px (содержит изображения).

Однако при работе на экранах меньшего размера браузер пытается принудительно установить содержимое внутри исходных \ трех столбцов, когда оно должно перейти в два столбца. Есть ли предпочтительный лучший способ, чтобы содержимое проходило в два столбца, когда содержимое начинает перекрываться?

Answer 1

Если вы используете column-width собственность, а не column-countбраузер автоматически настроит количество столбцов, необходимое для заполнения доступного пространства.

http://codepen.io/cimmanon/pen/CcGlE

.foo {
    columns: 500px; // shorthand, prefixes may be necessary
}

Answer 2

@media (max-width: 500px) {
  .your element selector here {
 -webkit-column-count: 2;
  -moz-column-count:    2;
  column-count:         2;

  }
}