.flex-container {
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    text-align: center;
}

.flex-container > * {
    padding: 0px;
    -webkit-flex: 1 100%;
    flex: 1 100%;
}

.article {
    text-align: left;    
    font-family: GoldenbookOSF;
    font-size: 16px;
    padding: 2em;
    color: #000080;
    background-color: #f2f2f2;
}

header {color: #ccccff;        
font-family: blacksword;
background-color: #ffffff;}
footer {color: #ffffff;        
font-family: blacksword;
background-color: #66a3ff;}
.nav {background: #000080;
    border-top: 7px solid #66a3ff;}
    
.nav ul {
    list-style-type: none;
    padding: 0;
}
.nav ul a {
font-variant: small-caps;
    font-family: GoldenbookOSF;
word-spacing: 30px;
    text-decoration: none;
    color: #ffffff;
    background-color: transparent;
    text-decoration: none
}
.nav ul a:hover {
    color: #bfbfbf;
    background-color: transparent;
    text-decoration: none;}
.nav ul a:active {
    color: #ffffff;
    background-color: transparent;
    text-decoration: underline;

@media all and (min-width: 768px) {
    .nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
    .article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}
    footer {-webkit-order:3;order:3;}
}