<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;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.