I have a flexbox like this:

[![Three boxes side-by-side](https://i.stack.imgur.com/zJFi7.png)](https://i.stack.imgur.com/zJFi7.png)

When the container is too narrow, it wraps like this:

[![Two boxes on the first row, and one box on the second row](https://i.stack.imgur.com/62Zka.png)](https://i.stack.imgur.com/62Zka.png)

But I want it to do this:

[![Three boxes stacked vertically](https://i.stack.imgur.com/7BoZj.png)](https://i.stack.imgur.com/7BoZj.png)

In other words, when the flexbox wraps, I want it to wrap *everything at once.* It's either completely horizontal or completely vertical.

The flexbox elements aren't all necessarily the same size.

Can it be done?