/* un peu de déco */
header, #content > *, footer {
    background-color: #AAAAEE;
    padding: 1em;
    margin: 0.2em;
    border-radius: 1em
}

/*Ca nous intéresse à partir de là*/
header, #content, footer {
    display: -webkit-box;
    display: -moz-box;         
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;             /* déclaration flexbox suivant les navigateurs*/
}

/* On adapte les boites */
main {
    flex: 1; /* Force l'étirement */
    overflow: auto; /* scrolling de la div */
    order: 2 /* position */
}

nav {
    order: 1 /* position */
}

aside {
    order: 3 /* position */
}

/* On force la taille de la page... et on modèle de boite global */
body, html {
    display: flex;
    flex-direction: column;  /* disposition */
    height: 100%
}

/* et on s'arrange pour que le contenu (ligne 2) prenne toute la place */
#content {
    height: 100%
}



@media all and (max-width: 600px) {
    #content {
        flex-flow: column  /* disposition */
    }
    nav, aside {
        order: 2  /* position */
    }
    main {
        order: 1  /* position */
    }
}