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>
  

Should I group the two aside flex items? (is it even possible?) Or should I use columns instead of rows?

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>

---

Updated with a 2:nd sample after a comment

If you want to go with flexbox alone, and no script, the order property will make it easy to sort the elements but you'll need a inner wrapper with a fixed height

You can of course move the header outside the wrapper as well, though I guess you want them all in one container

.innerwrapper {  
  display: flex;
  flex-direction: column;
}
header, .innerwrapper > * {
  padding: 10px;
}
.innerwrapper > * {
  border: 1px solid gray;
}

@media all and (min-width: 600px) {
  .innerwrapper {
    height: 220px;
    flex-wrap: wrap;
  }
  article {
    width: 66.66%;
  }
  aside {
    width: 33.33%;
  }
  .aside1 { order: 3; }
  .aside2 { order: 4; }
  .article2 { order: 2; }  
}


/* 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>

  <div class="innerwrapper">        
    <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>
</div>