Flexbox Responsive Navigation Issue - css

Question

Im trying to build a responsive navigation using flexbox. I have the desktop version looking fine. But when it enters the phone media query, I want the order of the items to change. I want the logo above the navigation links on its own line, and the 4 nav links below centrally aligned. I have tried everything so I come to the great people of stack overflow for help.
link to code:
http://codepen.io/Davabo/pen/EKNBMz
* {margin:0; padding:0; font-weight: normal;}
$phone: 480px;
#mixin phone {
#media (max-width: #{$phone}) {
#content;
}
}
.menu{
display:flex;
height: auto;
max-width: 100%;
a{text-decoration:none;color: black;padding:20px;}
& > div {
flex: 2;
font-size: 20px;
text-align: center;
padding-top: 30px;
}
.logo {
width: 100%;
flex: 1;
padding-top: 40px;
text-align: center;
}
#include phone {
.logo {
background: pink;
text-align: center;
flex: 5;
flex-grow: 5;
}
.nav1, .nav2 {
flex-basis: 100%;
width: 100%;
}
}
}
I have attached what I want the phone navigation to look like:
http://prntscr.com/afwt0g
Thank you so much for any help!

Answer 1

You need to use a combination of the order and flex-grow properties on the items e.g.
#media screen and {max-width: 480px){
.menu{flex-wrap: wrap;}
.logo{order: 1; flex-grow: 2;}
.nav1{order: 2; flex-grow: 1;}
.nav2{order: 3; flex-grow: 1;}
}
Order rearranges the order of items within a flex container.
Flex-grow works out the sizing of an element compared to it's siblings within a flex container
wrap on the container forces items to wrap when the container width forces it
Here is a link to a good flexbox resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/