Justify-content Property

At its minimum width, the columns (the colored areas) can have only about a dozen characters (plus or minus a couple depending on font size) without overflowing. Anyone not unimaginative can probably find a longer word. This example can be styled for a small screen and will have only two columns if the screen width has shrunk to perhaps 500 to 600 pixels.

Of course, this example has a statement under the head tag: <meta name="viewport" content="width=device-width, initial-scale=1">. Then the style section later has @media screen and (max-width: 500px) followed by:
{#outer div {width: 40%; min-width: 160px; height: 400px; overflow-y: auto; overflow-x: hidden; Overflow auto means the scroll bar appears only if needed; hidden means it doesn't appear. Finally, there is #inner1 {display: none;}, which tells the light-green area not to appear.

The content of this area is identified as "class small3", and its display is "block". The content, this text, does not appear on wide screens because the styling for screens wider than 500 pixels has the statement .small3 {display: none;}.