display: contents; causes an element to act as if it's replaced by its contents (including pseudo-elements).

If it's supported, all four boxes appear in a row, and you won't see any red.

display:contents is supported in Firefox.

By applying display: contents within a media query, you can dynamically alter which elements a flexbox flexes.