Flexbox layout + media queries

by Bohdan Doroshenko

HTML

<!DOCTYPE html>
<html lang="ru">
	<head>
	<title>W3.CSS Template</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="flexbox.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
	</head>
	<body>
		<section>
			<div class="wrapper">
				<div class="row">
					<div class="col col-lg-3 col-md-6 col-xs-12">Some</div>
					<div class="col col-lg-3 col-md-6 col-xs-12">Some</div>
					<div class="col col-lg-3 col-md-6 col-xs-12">Some</div>
					<div class="col col-lg-3 col-md-6 col-xs-12">Some</div>
				</div>
			</div>
		</section>
	</body>
</html>

CSS

html, body {
	margin: 20px 0 0 0;
	background: #232323;
	color: #fff;
}

.wrapper {
	max-width: 1280px;
	padding: 0 15px;
	margin: 0 auto;
	border: 1px solid #ff0;
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px;
}

.col {
	min-height: 400px;
	box-sizing: border-box;
	text-align: center;
	background: #777;
	width: calc(8.33% - 30px);
	margin: 15px;
}

.col-lg-1 {
	width: calc(8.33% - 30px);
}

.col-lg-2 {
	width: calc(16.66% - 30px);
}

.col-lg-3 {
	width: calc(25% - 30px);
}

.col-lg-4 {
	width: calc(33.33% - 30px);
}

.col-lg-5 {
	width: calc(41.66% - 30px);
}

.col-lg-6 {
	width: calc(50% - 30px);
}

.col-lg-7 {
	width: calc(58.33% - 30px);
}

.col-lg-8 {
	width: calc(66.66% - 30px);
}

.col-lg-9 {
	width: calc(75% - 30px);
}

.col-lg-10 {
	width: calc(83.33% - 30px);
}

.col-lg-11 {
	width: calc(91.66% - 30px);
}

.col-lg-12 {
	width: calc(100% - 30px);
}

@media screen and (max-width: 992px) {
	.col-md-1 {
		width: calc(8.33% - 30px);
	}

	.col-md-2 {
		width: calc(16.66% - 30px);
	}

	.col-md-3 {
		width: calc(25% - 30px);
	}

	.col-md-4 {
		width: calc(33.33% - 30px);
	}

	.col-md-5 {
		width: calc(41.66% - 30px);
	}

	.col-md-6 {
		width: calc(50% - 30px);
	}

	.col-md-7 {
		width: calc(58.33% - 30px);
	}

	.col-md-8 {
		width: calc(66.66% - 30px);
	}

	.col-md-9 {
		width: calc(75% - 30px);
	}

	.col-md-10 {
		width: calc(83.33% - 30px);
	}

	.col-md-11 {
		width: calc(91.66% - 30px);
	}

	.col-md-12 {
		width: calc(100% - 30px);
	}
}

@media screen and (max-width: 768px) {
	.col-sm-1 {
		width: calc(8.33% - 30px);
	}

	.col-sm-2 {
		width: calc(16.66% - 30px);
	}

	.col-sm-3 {
		width: calc(25% - 30px);
	}

	.col-sm-4 {
		width: calc(33.33% - 30px);
	}

	.col-sm-5 {
		width: calc(41.66% - 30px);
	}

	.col-sm-6 {
		width: calc(50% - 30px);
	}

	.col-sm-7 {
		width: calc(58.33% - 30px);
	}

	.col-sm-8 {
		width: calc(66.66% - 30px);
	}

	.col-sm-9 {
		width: calc(75% - 30px);
	}

	.col-sm-10 {
		width: calc(83.33% - 30px);
	}

	.col-sm-11...