Edit in JSFiddle

.all-wrap {
    display: flex;
    flex-flow: row;
}
.all-wrap .content-wrap {
    background: #dddd88;
    flex: 3 1 60%;
    order: 2;
	min-height: 100px;
}
.all-wrap .menu-wrap {
    background: #ccccff;
    flex: 1 6 20%;
    order: 1;
}
.all-wrap .sidebar-wrap {
    background: #ccccff;
    flex: 1 6 20%;
    order: 3;
}
.header-wrap, .footer-wrap {
    background: #ffeebb;
}
/* Too narrow to support three columns */
 @media all and (max-width: 640px) {
    .all-wrap, #page {
        flex-direction: column;
    }
    .all-wrap .content-wrap, .all-wrap .menu-wrap, .all-wrap .sidebar-wrap {
        /* Return them to document order */
        order: 0;
    }
}

<header class="header-wrap">header</header>
<div class="all-wrap">
    <article class="content-wrap">article</article>
    <nav class="menu-wrap">nav</nav>
    <aside class="sidebar-wrap">aside</aside>
</div>
<footer class="footer-wrap">footer</footer>