Flexbox with 5 Column Layout

<div class="row">
	<div class="container">
		<div class="wrap-box d-flex-row">
			<div class="box pink col-1">1</div>
			<div class="box orange col-2">2</div>
			<div class="box yellow col-3">3</div>
			<div class="box gray col-4">4</div>
			<div class="box blue col-5">5</div>
		</div>
	</div>
</div>

.container{
	width:1160px;
	max-width:90%;
	margin:20px auto
}
.d-flex-row{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	text-align:center
}
.box{
	flex:1;
	padding:20px;
	font-size:30px;
	min-height:100px;
	box-sizing:border-box;
}
.pink{
	background:#f77171
}
.orange{
	background:#f89e52
}
.yellow{
	background:#f4d460
}
.gray{
	background:#d3d3d3
}
.blue{
	background:#add8e6
}
.box:nth-child(5),
.box:nth-child(1){
	flex-basis:100%;
}
.box:nth-child(3){
	flex-grow:2;
}
@media(max-width:680px){
	.d-flex-row{
		flex-wrap:wrap;
		flex-direction:column;
	}
	.box{
		flex:auto
	}
	.box:nth-child(3){
		flex-shrink:2;
	}
}