FlexBox: Have either one or three columns
I'm creating a responsive website. There are multiple boxes (blocks). All of those boxes contain three pieces of information and right now, the space between them is distributed equally by flexbox (space-between) like this:
|--------------------------------------------------------------|
| |
| Title1: Content1 Title2: Content2 Title3: Content3 |
| |
|--------------------------------------------------------------|
The container resizes according to the screen size. Now, if the container box is too small, this happens:
|----------------------------------------|
| |
| Title1: Content1 Title2: Content2 |
| Title3: Content3 |
| |
|--------------------------------------- |
Is there a media-query-less way to have this happen instead?
|----------------------------------------|
| |
| Title1: Content1 |
| Title2: Content2 |
| Title3: Content3 |
| |
|--------------------------------------- |