Responsive div blocks - html

Question

I have 6 blocks in a row like that:
In mobile and desktop version everything works as I want, but when I change flex-direction from row to column:
In the desktop version, everything works well, but on the mobile version, blocks do not arrange 2 in each row, they are in a column. How can I solve that?
CSS:
* {
box-sizing: border-box;
}
img {
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
}
.picture-box {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
padding: 3rem 1.5rem;
}
.ring {
flex: 0 0 calc(50% - 10px);
padding: 20px;
margin-bottom: 20px;
border: 1px solid green;
text-align: center;
}
.thumb {
display: inline-block;
max-width: 200px;
padding: 10px;
border: 1px solid blue;
}
#media all and (min-width: 1024px) {
.ring {
flex: 0 0 calc((100% / 3) - (40px / 3))
}
}
#media all and (min-width: 1240px) {
.ring {
flex: 0 0 calc((100% / 6) - (100px / 6))
}
}
HTML:
<div class="picture-box">
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
</div>

Answer 1

What about using the desktop media query to keep the column layout and use the flex-direction : row for mobile and tablet ?
#media all and (min-width: 1024px) {
.ring {
flex: 0 0 calc((100% / 3) - (40px / 3))
}
.picture-box {
flex-direction: column;
}
}
See this fiddle

Answer 2

Please use, https://getbootstrap.com/ framework .
and use html structure like this,
<div class="picture-box">
<div class="row">
<div class="col-sm-2">
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
</div>
<div class="col-sm-2">
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
</div>
<div class="col-sm-2">
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
</div>
<div class="col-sm-2">
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
</div>
<div class="col-sm-2">
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
</div>
<div class="col-sm-2">
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
</div>
<div class="col-sm-2">
<div class="ring">
<div class="thumb">
<img src="https://via.placeholder.com/200">
</div>
</div>
</div>
</div>
</div>

Answer 3

Please you can try this....
<style>
body{padding: 0px;margin: 0px;}
*{box-sizing: border-box;}
img{width: auto;max-width: 100%;}
.picture-box{display: flex;flex-direction: row;justify-content:space-around; padding: 3rem 1.5rem;}
.ring{padding: 20px;margin:0px 10px 20px 10px;border: 1px solid green;text-align: center;}
.thumb{display: block;padding: 10px;border: 1px solid blue;}
#media(max-width: 1024px){.picture-box{flex-wrap: wrap;}.ring{width: calc(33.3% - 20px);}}
#media(max-width: 768px){.ring{width: calc(50% - 20px);}}
#media(max-width: 480px){.ring{width: 100%; margin: 0px 0px 20px 0px;}}
</style>