html - CSS Flexbox group 2 flex items

Question

I'm trying to learn Flexbox and I'm stuck with a layout I want to create.

On mobile I have the following layout:

Is it possible to get the following layout on desktop?

The code:

.wrapper {  
  display: flex;  
  flex-flow: row wrap;
}
.wrapper > * {
  padding: 10px;
  flex: 1 100%;
  border: 1px solid grey;
}
@media all and (min-width: 600px) {
  .wrapper > article { 
    flex: 3 66%;
  }
  .wrapper > aside {
    flex: 1 33%;
  }
}


/* rest of styling */
* {
  box-sizing: border-box;
}
h1 {
  color: #FFF;
  font-size: 16px;
  font-family: sans-serif;
  text-align: center;
}
article {
  height: 100px;
}
aside {
  height: 62px;
}

.article1 {
  background-color: Crimson;
}
.article2 {
  background-color: DarkCyan;
}
aside {
  background-color: DimGray;
}
header {
  background-color: gold;
}

<div class="wrapper">
  <header>
    <h1>header</h1>
  </header>
  <article class="article1">
    <h1>Article 1</h1>
  </article>
  <aside class="aside1">
    <h1>aside 1</h1>
  </aside>
  <article class="article2">
    <h1>Article 2</h1>
  </article>
  <aside class="aside2">
    <h1>aside 2</h1>
   </aside>
 </div>
  

Answer 1

Based on your requirements, no fixed height, this can't be done with flexbox alone.

You either need to use script, which could move some elements on resize, like in this answer, re-order flexbox item, or as in below sample, combining flexbox with float

.wrapper {  
  display: flex;
  flex-direction: column;
}
.wrapper > * {
  padding: 10px;
  flex: 1 100%;
  border: 1px solid grey;
}
.aside1 { order: 2; }
.aside2 { order: 4; }
.article1 { order: 1; }  
.article2 { order: 3; }  

@media all and (min-width: 600px) {
  .wrapper {  
    display: block;  
  }
  aside { float: right; width: 33.33%; }
  article { float: left; width: 66.66%; }  
}


/* rest of styling */
* {
  box-sizing: border-box;
}
h1 {
  color: #FFF;
  font-size: 16px;
  font-family: sans-serif;
  text-align: center;
}
article {
  height: 100px;
}
aside {
  height: 62px;
}
.article1 {
  background-color: Crimson;
}
.article2 {
  background-color: DarkCyan;
}
aside {
  background-color: DimGray;
}
header {
  background-color: gold;
}

<div class="wrapper">
  <header>
    <h1>header</h1>
  </header>

  <aside class="aside1">
    <h1>aside 1</h1>
  </aside>
  <article class="article1">
    <h1>Article 1</h1>
  </article>

  <aside class="aside2">
    <h1>aside 2</h1>
  </aside>
  <article class="article2">
    <h1>Article 2</h1>
  </article>
 </div>