<div class="container">
	<div class="thumb">
		<img src="http://placehold.it/200x300" alt="" />
	</div>
	<div class="thumb thumb2">
		<img src="http://placehold.it/100x300" alt="" />
	</div>
	<div class="thumb">
		<img src="http://placehold.it/100x100" alt="" />
	</div>
	<div class="thumb thumb2">
		<img src="http://placehold.it/300x200" alt="" />
	</div>
	<div class="thumb ">
		<img src="http://placehold.it/100x100" alt="" />
	</div>
	<div class="thumb thumb2">
		<img src="http://placehold.it/300x200" alt="" />
	</div>
		<div class="thumb">
		<img src="http://placehold.it/100x300" alt="" />
	</div>
	<div class="thumb thumb2">
		<img src="http://placehold.it/100x100" alt="" />
	</div>
	<div class="thumb">
		<img src="http://placehold.it/300x200" alt="" />
	</div>
	<div class="thumb thumb2">
		<img src="http://placehold.it/100x100" alt="" />
	</div>
	<div class="thumb">
		<img src="http://placehold.it/300x200" alt="" />
	</div>
</div>
* {
	box-sizing: border-box;
}

img {
	max-width: 100%;
}

.container {
	display: flex;
	flex-wrap: wrap;
	height: 100vh;
}

.thumb {
	border: 2px solid green;
	flex: 1 1 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media(min-width: 480px) {
	.thumb {
		flex: 1 1 50%;
	}
}

@media(min-width: 640px) {
	.thumb {
		flex: 1 1 25%;
	}
	
	.thumb2 {
		flex: 1 1 50%;
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.