How can I use flex boxes in CSS to ensure that from a min-width of 769px to 1025px, the third figure is displayed on a new line while the first and second figures remain on the top line taking up equal space?
<div class="mid-col-section-2">
<figure><a href="#"><img src="images/landscape-maintenance.jpg" alt="landscape" height="300"><figcaption>Landscape Maintenance</figcaption></a></figure>
<figure><a href="#"><img src="images/landscape-design.jpg" alt="landscape" height="300"><figcaption>Landscape Design</figcaption></a></figure>
<figure><a href="#"><img src="images/masonry-design.jpg" alt="landscape" height="300"><figcaption>Masonry Design</figcaption></a></figure>
.mid-col-section-2 {
display: flex;
flex-direction: column;
}
.mid-col-section-2 figure a {
color: black;
}
figcaption {
text-align: left;
}
@media (min-width: 1025px){
.mid-col-section-2 {
flex-direction: row;
justify-content: space-between;
padding: 10px 60px 10px 60px;
}
figcaption {
text-align: center;
}
.mid-col-section-2 figure {
padding: 15px 0 15px 0;
}
}