Responsive Column Layout with Flex

Resize the browser window to see the responsive effect. There are three columns if the screen is wider than 975px.

On this screen, which is 975px wide or less, three columns have become two columns.

Yes. When the screen is 500px wide or less, everything is in a single column.

On screens that are 975px wide or less, go from three columns to two columns. Shrink the screen width to see.

On screens that are 500px wide or less, make all into a single column. Keep shrinking.

On screens that are 500px wide or less, make all into a single column.

Although I suspect this effect can be accomplished more easily using other methods, I wanted to demonstrate the power of CSS. Combining different elements of CSS allows one to spin the web (page) to fit almost any fancy.