Flexbox: Move header and footer to sidebar with flexbox - html

Question

My content layout consists of three sections: header, content and footer. For small devices I want to keep this order, on desktop I would like to move header and footer to the sidebar.
Implemented using floats: http://codepen.io/anon/pen/jqrZby
Markup
<div class="page">
<div class="top"></div>
<div class="content"></div>
<div class="bottom"></div>
</div>
CSS
.page {
border: 2px solid black;
padding: 1em;
}
.page:after {
content: "";
display: block;
clear: both;
}
.page > * {
margin-bottom: 1em;
}
.top {
border: 2px solid red;
height: 100px;
}
.content {
border: 2px solid blue;
height: 400px;
}
.bottom {
border: 2px solid green;
height: 200px;
}
#media screen and (min-width: 800px) {
.content {
width: 66%;
float: left;
}
.top, .bottom {
width: 33%;
float: right;
}
}
I'm trying to find a solution using flexbox with a fixed spacing between content and sidebar. Anybody got an idea if this is possible?

Answer 1

Without changing the stucture and using flexbox you need to use flex-direction:column.
First we build it "mobile first" because it follows the actual order of the div structure we have already.
Then, at the appropriate media query we need to make the container wrap...often this will require a fixed height (be it viewport or px value)...then we can re-order the elements (using, ahem, order) and impose our required widths.
Codepen Demo
* {
box-sizing: border-box;
}
.page {
border: 2px solid black;
display: flex;
flex-direction: column;
height: 400px;
padding: 1em;
}
.top {
border: 2px solid red;
height: 100px;
width: 100%;
order: 1;
margin-bottom: 1em;
}
.content {
border: 2px solid blue;
height: 400px;
order: 2;
}
.bottom {
border: 2px solid green;
height: 200px;
order: 3;
margin-top: 1em;
}
#media screen and (max-width: 800px) {
.page {
flex-wrap: wrap;
justify-content: space-between;
}
.top {
order: 2;
}
.top,
.bottom {
width: 33%;
}
.content {
order: 1;
flex: 0 0 100%;
width: 66%;
margin-right: 1em;
}
}
<div class="page">
<div class="top">top</div>
<div class="content">content</div>
<div class="bottom">bottom</div>
</div>