Адаптивная сетка

не получается адаптивная верстка, прошу подсказать... Всё голову сломал...

<body>
	<div class="wrapper">
		<div class="box color-blue col-lg-100"></div>
		<div class="box color-blue col-sm-50"></div>
		<div class="box color-blue col-sm-50"></div>
		<div class="box color-red col-xs-33"></div>
		<div class="box color-red col-xs-33"></div>
		<div class="box color-red col-xs-33"></div>
		<div class="box color-green col-lg-75"></div>
		<div class="box color-green col-xs-25"></div>
		<div class="box color-green col-lg-100"></div>
		<div class="box color-gray col-lg-100"></div>
		<div class="box color-gray col-xs-33"></div>
		<div class="box color-gray col-sm-66"></div>
	</div>
</body>

css

* {
	padding: 0;
	margin: 0;
}
body {
	width: 1440px;
	font-family: 'Raleway', sans-serif;
}
.wrapper {
	display: flex; 
	flex-wrap: wrap;
}
.box {
	height: 50px;
	border: 1px solid black
}
.color-blue {
	background-color: blue;
}
.color-red {
	background-color: red;
}
.color-green {
	background-color: green;
}
.color-gray {
	background-color: gray;
}