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?

Ardolino

Use a media query to change the column count property? – Balustrade

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
}

Polychasium

This is awesome...exactly what I needed...however...is there anyway I can have the columns list left to right instead of top-down...for second item would be in the second column...??? – Hulda

@Hulda No. The multi-column module is intended to be used to create newspaper/magazine style columns, which flow top/down. Flexbox can flow left/right or right/left (or top/down or bottom/up), but you're not 100% guaranteed to have perfect "columns" (read: it's not a grid system). – Polychasium

So I would have to resort to javascript or similar to render such a layout? – Hulda

Exactly what I needed, thanks! – Plantation

Answer 2

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

  }
}

Balustrade