My current setup includes a flexbox with 4 images. However, when I decrease the width, the 4th image disappears. You can see the issue in the image below. https://i.sstatic.net/A7xFi.png
I want the flexbox to change into the layout shown below when the width reaches a certain size.
https://i.sstatic.net/YQ3C5.png
I've been struggling to achieve this transformation. I attempted to use flex-direction: column;, but that made the entire list vertical which is not what I intended.
div{
display: flex;
flex-direction: wrap;
border-style:solid;
padding-top: 2em;
}
figcaption[certification=yes]::before {
font-size: 0.75em;
/*Check mark*/
content: "\2705";
display: inline-block;
color:red;
}
figcaption[certification=yes]::after {
font-size: 0.75em;
/*Dispaly li*/
content: li;
display: inline-block;
color:red;
}
figure{
padding:2.5em;
margin-left: 3em;
margin-bottom:2em;
}
@media screen and (max-width: 1185px)
{
// I want the 4th image to be below the 1st image once the width is 1185px
div{
flex-direction: column;
}
}<div>
<figure>
<img src="images/ACE.png" height="150em">
<figcaption data-title="Multimedia and the World Wide Web" certification="yes">Nighthawk</figcaption>
</figure>
<figure>
<img src="images/NSCA.png" height="150em">
<figcaption data-title="Multimedia and the World Wide Web" certification="yes">Nighthawk</figcaption>
</figure>
<figure>
<img src="images/USA.png" height="150em">
<figcaption data-title="Multimedia and the World Wide Web" certification="yes">Nighthawk</figcaption>
</figure>
<figure>
<img src="images/Functional-movement.jpg" height="150em">
<figcaption data-title="Multimedia and the World Wide Web" certification="yes">Nighthawk</figcaption>
</figure>
</div>