With column-count, can you dynamically change from 3 to 2 columns if the resolution smaller?

Question

I'm using the column-count property to set a page with multiple divs at three columns, which looks great on larger screens. Each div has a fixed width of, say, 500px (contained images).

When working on smaller screens however, the browser tries to force the content within the original \three columns when it should go to two columns. Is there a preferred best method to have the content go to two columns when the content starts to overlap?

Answer 1

If you use the column-width property, rather than column-count, the browser will automatically adjust the number of columns as needed to fill the available space.

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;

  }
}