ReOrder with Flex

HTML

<body>
    <header>Header</header>
    <p>image</p>
    <div class="main_content">Main Content</div>
    <div class="gallery_filter">Filter</div>
    <aside class="gallery_upload">Upload</aside>
    <div class="g_ads">Box</div>
    <footer>Footer</footer>
</body>

CSS

* {
    margin:0;
    padding:0;
}

body {
    display: flex;
    flex-flow: row wrap;
    height:100%;
}
body > * {
    padding: 10px;
    margin-right:10%;
    flex: 1 90%;
}
header {
    background: #ED1B24;
    height:35px;
}
footer {
    background: #7F7F7F;
}

.main_content {
    text-align: left;
    background: #A349A3;
    min-height:200px;
}

.gallery_filter {
    background: #FEAEC9;
}
p {
    background: #FF7F26;
    height:50px;
}
.gallery_upload {
    background: #00A3E8;
}
.g_ads {
    padding: 0;
    margin: 0;
    flex: 4 10%;
    background: #7092BF;
    height:100%;
    width: 10%;
    position: absolute;
    right: 0;
}
.gallery_filter, .gallery_upload { flex: 0 2 44%; margin:0; }

.main_content   { flex: 3 90%; }
header          { order: 2; }
p               { order: 3; }
.gallery_filter { order: 4; }
.gallery_upload { order: 5; }
.main_content   { order: 6; }
footer          { order: 7; }
.g_ads          { order: 1; }