Flexbox - different items order on mobile than on desktop - responsive-design

Question

I’m trying to do a responsive website in flexbox.
This is how my website looks like on big screens.
And this is what I want to get on mobile devices.
As you can see, my problem lies in the different order of items on mobile and on the desktop.
My question is: is it possible to do?

Answer 1

This is the best layout I can think of right now: traditional float for big screen & flex for small screen to reorder.
* { box-sizing: border-box !important; }
[class^="item-"] {
background-color: blue;
border: 3px solid white;
color: white;
float: left;
}
.item-1, .item-5, .item-6, .item-9 {
float: none;
}
.item-2 {
width: 33.33%;
height: 300px;
}
.item-3, .item-4 {
width: 33.33%;
height: 200px;
}
.item-5 {
height: 100px;
overflow: hidden;
}
.item-7, .item-8 {
width: 50%;
}
#media (max-width: 768px) {
[class^="item-"] {
float: none;
width: initial;
height: 50px;
}
.container {
display: flex;
flex-direction: column;
}
.item-5 {
order: 1;
}
.item-2 {
order: 2;
}
.item-6 {
order: 3;
}
.item-7 {
order: 4;
}
.item-8 {
order: 5;
}
.item-9 {
order: 6;
}
.item-3 {
order: 7;
}
.item-4 {
order: 8;
}
}
<div class="container">
<div class="item-1">item1</div>
<div class="item-2">item2</div>
<div class="item-3">item3</div>
<div class="item-4">item4</div>
<div class="item-5">item5</div>
<div class="item-6">item6</div>
<div class="item-7">item7</div>
<div class="item-8">item8</div>
<div class="item-9">item9</div>
</div>