display of blocks in responsive version - html

Question

I have 6 images wrapped inside an outer div.
I'd like to see 2 images per row in the mobile version, so there should be 3 columns with 2 images per row.
I have this HTML:
* {
box-sizing: border-box;
}
img {
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
}
.picture-box {
width: 70%; /* limit screen width - max width could have been used aswell */
margin: 0 auto; /* center content */
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.ring {
padding: 10px;
text-align: center; /* Center ring div */
}
#media screen and (min-width: 1200px) {
.ring {
width: 25%;
}
}
#media screen and (max-width: 1199px) {
.ring {
width: 33.33%;
}
}
#media screen and (max-width: 768px) {
.ring {
width: 50%;
}
.picture-box {
width: 100%;
}
}
.thumb {
display: inline-block;
max-width: 200px;
padding: 10px;
border: 1px solid blue;
}
<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>
Working JSFiddle Example
I tried to change flex-direction from row to column, but it did not help.
I may need to write widths for them, but do not know how and now I cannot make them into a column.
How can I solve that?

Answer 1

Is this what you are looking for?
I used width like you asked about in your question - this is one way to do it.
This way you can control how many boxes (.ring's) you want to show in each breakpoint.
* {
box-sizing: border-box;
}
img {
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
}
.picture-box {
width: 70%; /* limit screen width - max width could have been used aswell */
margin: 0 auto; /* center content */
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.ring {
padding: 10px;
text-align: center; /* Center ring div */
}
#media screen and (min-width: 1200px) {
.ring {
width: 25%;
}
}
#media screen and (max-width: 1199px) {
.ring {
width: 33.33%;
}
}
#media screen and (max-width: 768px) {
.ring {
width: 50%;
}
.picture-box {
width: 100%;
}
}
.thumb {
display: inline-block;
max-width: 200px;
padding: 10px;
border: 1px solid blue;
}
<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>
JSFiddle example