title: How do I make a flexbox switch to column mode when there isn't enough room for row mode?
body: <p>I have a flexbox like this:</p>
  
  <p><a href="https://i.stack.imgur.com/zJFi7.png" rel="noreferrer"><img src="https://i.stack.imgur.com/zJFi7.png" alt="Three boxes side-by-side"></a></p>
  
  <p>When the container is too narrow, it wraps like this:</p>
  
  <p><a href="https://i.stack.imgur.com/62Zka.png" rel="noreferrer"><img src="https://i.stack.imgur.com/62Zka.png" alt="Two boxes on the first row, and one box on the second row"></a></p>
  
  <p>But I want it to do this:</p>
  
  <p><a href="https://i.stack.imgur.com/7BoZj.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7BoZj.png" alt="Three boxes stacked vertically"></a></p>
  
  <p>In other words, when the flexbox wraps, I want it to wrap <em>everything at once.</em>  It's either completely horizontal or completely vertical.</p>
  
  <p>The flexbox elements aren't all necessarily the same size.</p>
  
  <p>Can it be done?</p>