css responsive layout

Try to resize the page:


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

Leave a Comment