.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: goudy old style;
    font-size: 16px;
    padding: 2em;
    color: #543136;
    background-color: #D8C6B8;
}

header {color: #D8C6B8;        
font-family: klinic slab bold;
background-color: #5e1211;}
footer {color: #D8C6B8;        
font-family: klinic slab;
font-variant: small-caps;
background-color: #5e1211;}
.nav {background: #5e1211;
    border-top: 7px solid #D8C6B8;}
    
.nav ul {
    list-style-type: none;
    padding: 0;
}
.nav ul a {
font-variant: small-caps;
    font-family: goudy old style;
word-spacing: 30px;
    text-decoration: none;
    color: #0B9446;
    background-color: transparent;
    text-decoration: none
}
.nav ul a:hover {
    color: #CF1C44;
    background-color: transparent;
    text-decoration: none;}
.nav ul a:active {
    color: #D8C6B8;
    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;}
}