Is it possible to mix rows and columns with flexbox?

Question

In other words, is it possible to achieve this?

Note: This is the best I could get:

Answer 1

In order to achieve what you want just make two changes to your code

First: Those divs that that you want one under the other, make them as child of a div as

  
Div 1
  

    
Div 2
    
Div 3
  
  
Div 4
  
Div 5

Second: In order to create a border for all div write your css as

.container  div {
  border: 1px solid black;
  background: #ececec;
  flex: 1;
}

instead of

.container > div {
  border: 1px solid black;
  background: #ececec;
  flex: 1;
}

which will apply the styles to all divs instead of divs directly inside the .container class

Have a look at this:

.container {
  border: 1px solid green;
  display: flex;
  flex-wrap: wrap;
}

.container  div {
  border: 1px solid black;
  background: #ececec;
  flex: 1;
}

.container > div:nth-of-type(1) {
  flex: 1 1 100%;
}

.container > div:nth-of-type(4) {
  flex: 1 1 100%;
}

  
Div 1
  

    
Div 2
    
Div 3
  
  
Div 4
  
Div 5