Untitled

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Flex Example</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>
			* {
				/* few reset */
				box-sizing: border-box;
				padding: 0;
				margin: 0;
			}
			.flex-container {
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				background-color: rgba(0,0,0,0.1);
				display: flex;
				flex-flow: row wrap;
			}
			@media only screen and (min-width: 1px) {
				.flex-container div:nth-child(1) {
					order: 1;
					background-color: rgba(255,0,0,0.1);
					height: 50%;
					width: 50%;
				}
				.flex-container div:nth-child(2) {
					order: 2;
					background-color: rgba(255,255,0,0.1);
					height: 50%;
					width: 50%;
				}
				.flex-container div:nth-child(3) {
					order: 3;
					background-color: rgba(255,0,255,0.1);
					height: 50%;
					width: 50%;
				}
				.flex-container div:nth-child(4) {
					order: 4;
					background-color: rgba(0,0,255,0.1);
					height: 50%;
					width: 50%;
				}
			}

			@media only screen and (min-width: 500px) {
				.flex-container div:nth-child(1) {
					order: 3;
					background-color: rgba(255,0,0,0.1);
					height: 25%;
					width: 50%;
				}
				.flex-container div:nth-child(2) {
					order: 2;
					background-color: rgba(255,255,0,0.1);
					height: 25%;
					width: 50%;
				}
				.flex-container div:nth-child(3) {
					order: 4;
					background-color: rgba(255,0,255,0.1);
					height: 50%;
					width: 100%;
				}
				.flex-container div:nth-child(4) {
					order: 1;
					background-color: rgba(0,0,255,0.1);
					height: 25%;
					width: 100%;
				}
			}

			@media only screen and (min-width: 800px) {
				.flex-container div:nth-child(1) {
					order: 2;
					background-color: rgba(255,0,0,0.1);
					height: 25%;
					width: 100%;
				}
				.flex-container div:nth-child(2) {
					order: 3;
					background-color: rgba(255,255,0,0.1);
					height: 25%;
					width: 100%;
				}
				.flex-container div:nth-child(3) {
					order: 1;
					background-color: rgba(255,0,255,0.1);
					height: 25%;
					width: 100%;
				}
				.flex-container div:nth-child(4) {
					order: 2;
					background-color: rgba(0,0,255,0.1);
					height: 25%;
					width: 100%;
				}
			}

			@media only screen and (min-width: 1100px) {
				.flex-container div:nth-child(1) {
					order: 4;
					background-color: rgba(255,0,0,0.1);
					height: 75%;
					width: 100%;
				}
				.flex-container div:nth-child(2) {
					order: 3;
					background-color: rgba(255,255,0,0.1);
					height: 25%;
					width: 25%;
				}
				.flex-container div:nth-child(3) {
					order: 1;
					background-color: rgba(255,0,255,0.1);
					height: 25%;
					width: 25%;
				}
				.flex-container div:nth-child(4) {
					order: 2;
					background-color: rgba(0,0,255,0.1);
					height: 25%;
					width: 50%;
				}
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>
				First Flex Item #1
			</div>
			<div>
				Second Flex Item #2
			</div>
			<div>
				Third Flex Item #3
			</div>
			<div>
				Fourth Flex Item #4
			</div>
		</div>
	</body>
</html>