<div class="row">
	<div class="container">
		<div class="wrap-box d-flex-row">
			<div class="box col-1"></div>
			<div class="box col-2"></div>
			<div class="box col-3"></div>
		</div>
	</div>
</div>
.container{
	width:1160px;
	max-width:90%;
	margin:20px auto
}
.d-flex-row{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}
.box{
	flex:1;
	width:33.33%;
	height:290px;
	background-size:cover;
	box-sizing:border-box;
}
.col-1{
	background-image:url(https://pixelthemes.com/wp-content/uploads/2023/12/man-593333_450.jpg)
}
.col-2{
	background-image:url(https://pixelthemes.com/wp-content/uploads/2023/12/desk-3076954_450.jpg)
}
.col-3{
	background-image:url(https://pixelthemes.com/wp-content/uploads/2023/12/man-2562325_450.jpg)
}
@media(max-width:680px){
	.d-flex-row{
		flex-direction:column;
		height:calc(100vh - 40px)
	}
	.box{
		width:100%;
		height:33vh;
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.