Try to resize the page:
css:
.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;
}
}
html:
<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>
General responsive rules:
- Try to avoid fixed width attribute (for example width:600px). It is better to use max-width instead (for example max-width:600px).
- Try to avoid fixed height attribute (for example height:300px). It is better to use max-height instead (for example max-height:300px).
- Try not to limit width of the content. It is more flexible to limit the with of the content with the wrapper. For example (form is inside of the .wrap): form{width:100%} .wrap {max-width:1000px}