Making specific flexbox responsive

For my school project which is due soon, I'm creating a website with sections that are like the sections ''our work'' and ''follow along'' on this website: https://bellafare.com/

I recreated them with the help of flexbox and they look just as I want them to on a 15 inch laptop screen and iphone 6/7/8. However! Between the width 646 to 978 the layout looks horrible because either one or several of the images end up underneath the row. Is there a way to fix this with media query and make it like on the bellafare website, that the size of the div becomes smaller as the screen becomes smaller until it's on an iphone 6/7/8 platform and then turns into columns? I've tried several options but I've hit a dead end. Also, how do I make the text end up on the images?

html:

<div class="classes">
        <div><a href="#">Beginner<img src="bella1.png"/></a></div>
        <div><a href="#">Intermediate<img src="bella2.png"/></a></div>
        <div><a href="#">Advanced<img src="bella3.png"/></a></div>
        </div>

and

 <section class="ig">
        <header>
            <h3><i>follow along <a href="XXX">@XXX</a></i></h3>
        </header>
        <div class="iglinks">
        <div><a href="#"><img src="ig1.png"/></a></div>
        <div><a href="#"><img src="ig2.png"/></a></div>
        <div><a href="#"><img src="ig3.png"/></a></div>
        <div><a href="#"><img src="ig4.png"/></a></div>
        <div><a href="#"><img src="ig5.png"/></a></div>
        <div><a href="#"><img src="ig6.png"/></a></div>
        </div>
    </section>

CSS:

.classes {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    width: 100%;
}

.ig {
    margin-top: 50px;
}

.iglinks {
    display: flex;
    margin: 0 auto;
    flex-flow: row wrap;
    justify-content: space-around;
}

I would be extremely thankful for any help I can get. I'm sorry if this is a complete noob question, my anxiety is flaring up so I thought I'd give this a shot.

Fix your flex-flow with nowrap

 .iglinks {
    flex-flow: row nowrap;
    }

and make your images responsive:

@media (min-width: 646px) and (max-width:978px){
  .iglinks img {
    width: 100%;
    height: auto;
  }
}

you might have to add some padding