body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;

    font-size: 20px; 
}

.wrapper {
    display: flex;
    flex-flow: row wrap;
    font-weight: bold;
    text-align: center;
}


.wrapper > * {
    padding: 10px;
    flex: 1 100%;
    box-sizing: border-box;
}


.responsive-img {
    width: 50%;      
    max-width: 100%;
    height: auto;
    display: block;    
    margin-top: 20px;  
}


.header-flex-2 { background: tomato; }
.footer-flex-2 { background: lightgreen; order: 5; }

.main {
    text-align: left;
    background: deepskyblue;
    min-height: 400px; 
    order: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

}

.aside-1 { background: gold; min-height: 400px; order: 3; }
.aside-2 { background: hotpink; min-height: 400px; order: 4; }


@media all and (min-width: 1200px) {
    body {
        font-size: 16px;
    }

    .main {
        flex: 3 0px; 
        order: 2;   
    }

    .aside-1 {
        flex: 1;     
        order: 1;   
    }

    .aside-2 {
        flex: 1;     
        order: 3;    
    }
}


@media all and (min-width: 600px) and (max-width: 1199px) {
   
}