body {
	font-family: Tahoma, Geneva, sans-serif;
	line-height: 1.4em;
}
header, footer {
	color: #FFF;
	background-color: #36C;
	padding: 10px;
}
nav {
	color: #FFF;
	background-color: #C00;
	padding: 10px;
}
.content {
	background-color: #eee;
	padding: 10px;
}
.kontakt {
	background-color: #FF3;
	padding: 10px;
}
nav ul li a, footer ul li a {
	font-weight: bold;
	color: #FFF;
}
 @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;
}
}