/* create the three-column layout with header and footer */

.container {
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    justify-content:flex-start;
    align-items:stretch;
    background: #CCCCCC;
}
body > header {background: #22007D; padding: 10px 10px 10px 20px;}
body > header h1 {color: #EA9F20; text-align: left; font-size: 300%; font-weight:700;}
body > header h2 {color: #FCFF53; text-align: left; font-size: 125%;}

.left-section   {order:1; background: #CCCCCC; flex-basis:100%; min-height:300px;}
.middle-section {order:3; background: #EEEEEE; flex-basis:100%; min-height:300px;
         padding: 20px;-moz-border-radius: 8px;border-radius: 8px;
         behavior: url(ie-css3.htc);margin:10px;}
.right-section  {order:2; background: #CCCCCC; flex-basis:100%; min-height:300px;}

body > footer {background: #41627E; color:white; font-size: 85%;
               -webkit-order:4;order:4;text-align: center;padding: 5px;}

@media screen and (min-width:736px) {
   .container {
       flex-wrap:nowrap;
   }

    .left-section {
        flex-basis:200px;
        order:1; -webkit-order:1;
    }
    .middle-section {
        flex-basis:1;
        order:2;-webkit-order:2;
    }
    .right-section {
        flex-basis:200px;
        order:3;-webkit-order:3;
    }
}