How to make these image tiles responsive - html

Question

I have 3 image tiles (Image and Description) within a div element. I have used a flexbox such that all the 3 tiles are shown side by side in a row in full screen view. But when shown in a smaller screen, I want 2 of the tiles to be in the first row and the third tile to start a new second row. I tried it by giving the tile width 33% in the full screen case and width 50% in the smaller screen view but it isn't working mostly because I've made some mistake.
.container{
display: flex;
flex-direction: row;
}
.tile {
width: 33%;
}
.img {
width: 100%;
}
#media screen and (max-width: 685px) {
.tile{
width:50%;
}
<div class="container">
<div class="tile">
<img class="img" src="Sld1.jpg">
<p>Img1</p>
</div>
<div class="tile">
<img class="img" src="Sld2.jpg" >
<p>Img2</p>
</div>
<div class="tile">
<img class="img" src="Sld3.jpg">
<p>Img3</p>
</div>
</div>
<div class="container">
<div class="tile">
<img class="img" src="Sld1.jpg">
<p>Img1</p>
</div>
<div class="tile">
<img class="img" src="Sld2.jpg" >
<p>Img2</p>
</div>
<div class="tile">
<img class="img" src="Sld3.jpg">
<p>Img3</p>
</div>
</div>
<style>
.container{
display: flex;
flex-direction: row;
}
.tile {
width: 33%;
}
.img {
width: 100%;
}
#media screen and (max-width: 685px) {
.tile{
width:50%;
}
}
</style>
I cant quite figure out what to write in the media screen function such that in small screen view there are 2 tiles in upper row and the third div tile of container moves to another row below it. Please help me out with the CSS.

Answer 1

Set flex-wrap: wrap so the flex container will wrap at break points and then you can set up a class to break the wrap in media query with flex-basis. Just add that class to the div with the tile selector.
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.tile {
width: 33%;
}
.img {
width: 100%;
}
#media screen and (max-width: 685px) {
.tile {
width: 50%;
}
.break {
display: flex;
flex-basis: 55%; /* Change to 100% if you want it to fill up entire area under two images on top */
}
<div class="container">
<div class="tile two">
<img class="img" src="Sld1.jpg">
<p>Img1</p>
</div>
<div class="tile two">
<img class="img" src="Sld2.jpg" >
<p>Img2</p>
</div>
<div class="tile break">
<img class="img" src="Sld3.jpg">
<p>Img3</p>
</div>
</div>

Answer 2

All you need to do is to add flex-wrap: wrap inside your container class.
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}