body {
	font-family: Tahoma, Geneva, sans-serif;
	line-height: 1.4em;
	color: #06C;
}

.wrapper > *,
article > *
 {
	border: 1px solid #06C;	
	margin-top: 1em;
	margin-bottom: 1em;
	margin: 1em;
	padding: 10px;
}

ul {
	list-style-type:none;	
	margin:0;
	padding:0;
}
ul li > a{
	border: 1px solid #06C;	
	margin: 5px;
}

nav ul li a, footer ul li a {
	font-weight: bold;
	display:block;
	text-decoration:none;
	padding:5px;
	
}

nav ul li a:hover, footer ul li a:hover {
	background-color: #06C;
	color: white;	
}

 @media screen and (max-width: 479px) {
article {
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
}
nav {
	-webkit-order: 3;
	order: 3;
}
.content {
	-webkit-order: 1;
	order: 1;
}
.kontakt {
	-webkit-order: 2;
	order: 2;
}
}
 @media screen and (max-width: 959px)  and (min-width: 480px) {
article {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}
/* Reihenfolge festlegen */
	nav {order: 1;}
 	.content {order: 2;}
 	.kontakt {order: 3;}

/*Platzbedarf der Container*/
	nav {flex: 1 200px;}
 	.content {flex: 3 50%;}
 	.kontakt {flex: 1 50%;}


}
 @media screen and (min-width: 960px) {
article {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}
/* Reihenfolge festlegen */
  nav {order: 1;}
 .content {order: 2;}
 .kontakt {order: 3;}
 
/*Platzbedarf der Container, Gesamtbedarf 1+3+1=5, content=3/5 nav und kontakt jeweils 1/5*/
 nav {flex:  1 ;}
 .content {flex: 3;}
 .kontakt {flex:  1;}


}