css responsive layout

<style>
.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;
    }
}
</style>

<style> .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; } } </style>

<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>

<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>