CSS Flexbox vertical and horizontal directions

Question

I'm trying to use flexbox to create dynamic templates where I would mix elements in horizontal and vertical directions without creating wrappers for each group.

I have for example this kind of structure:

<div id="wrapper">
 <div id="zone1">
   zone1
 </div>
 <div id="zone2">
  zone2
 </div>
 <div id="zone3">
  zone3
 </div>
 <div id="zone4">
  zone4
 </div>
 <div id="zone5">
  zone5
 </div>

The wrapper would use display:flex and each children would be set at 100% for mobile screens like this:

My fiddle here: https://jsfiddle.net/laurentw/2myL6h45/2/

Now when the screen goes bigger, I'd like to do this

If I keep the divs as individual divs, I'm running into trouble because I have two different directions:

Fiddle example: https://jsfiddle.net/laurentw/wogmdxL5/4/

And then finally for much bigger screens:

I would like to keep all those divs separated so that I can try out multiple templates without altering the code. I want to influence the order (easy) but I would also like to control the direction and occupied space.

Is that something I can achieve with Flexbox without any additional JS?

Thanks