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                       |
|                                        |
|--------------------------------------- |