Flex Box Media Query Difficulty - html

Question

From min-width of 769px to 1025px, I want the 3rd figure on a new line while the first and second figures remain on the top line taking up equal space. I'm attempting flex boxes in css. How do I get this to work?
<div class="mid-col-section-2">
<figure><img src="images/landscape-maintenance.jpg" alt="landscape" height="300"><figcaption>Landscape Maintenance</figcaption></figure>
<figure><img src="images/landscape-design.jpg" alt="landscape" height="300"><figcaption>Landscape Design</figcaption></figure>
<figure><img src="images/masonry-design.jpg" alt="landscape" height="300"><figcaption>Masonry Design</figcaption></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;
}
}

Answer 1

It seems like you might want to brush up on flexbox properties. You're throwing a lot in there that you probably don't actually want.
I revised your markup since the <figure> tag has default styles applied to it by the browser:
<div class="mid-col-section-2">
<div class="mid-section">
<img width="100%" src="http://jonvilma.com/images/landscape-3.jpg" alt="landscape"><figcaption>Landscape Maintenance</figcaption>
</div>
<div class="mid-section">
<img width="100%" src="http://jonvilma.com/images/landscape-3.jpg" alt="landscape"><figcaption>Landscape Design</figcaption>
</div>
<div class="mid-section">
<img width="100%" src="http://jonvilma.com/images/landscape-3.jpg" alt="landscape"><figcaption>Masonry Design</figcaption>
</div>
</div>
Then I tidied up your CSS:
#media (min-width: 769px) and (max-width: 1025px){
.mid-col-section-2 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.mid-section {
margin: 0;
width: 45%;
}
Here's the result: https://jsfiddle.net/qdoxL23p/embedded/result/