how can i make elements stack above each other when the viewport width is not enough to make them display horizontally?

viewport small I've made a website that has 6 icons in the bottom, 3 in each row. when I resize the window so it becomes like the width of a phone, it becomes kinda weird and some of the icons go out. screenshots attached.

a img{
    border-radius: 50%;
}

a {
    padding: 5%;
}

#channels {
    display: flex;
    justify-content: center;
}



figcaption {
    font-size: larger;
}

#contact {
    display: flex;
    justify-content: center;
}

<div id="channels">
    <a href="https://www.youtube.com/channel/UCVYe9OwcrGrlRmlX8cSWgvg"><img src="images/ferglogo.jpg" alt=""><figcaption>iFerg</figcaption></a>
    
    <a href="https://www.youtube.com/channel/UCMY-hT12uNV9cC9Pn_DNk_w"><img src="images/fergplays.jpg" alt=""><figcaption>iFerg - Plays </figcaption></a>
    
    <a href="https://www.youtube.com/channel/UCjXc-3r4Mh9K9qdm5e04U9Q"><img src="images/ferglive.jpg" alt=""><figcaption>iFerg - Live</figcaption></a>

    <a href="https://www.youtube.com/channel/UC7WFPLWZdZHGI5BQ8PGsxuw"><img src="images/fergclips.jpg" alt=""><figcaption>iFerg - Clips</figcaption></a>
    
    </div>

    <hr>

    <h2>Contact</h2>
    <div id="contact">
    <a href="https://twitter.com/ferg"><img src="images/twitter.jpg" alt=""><figcaption>Twitter</figcaption></a>
    <a href="https://www.instagram.com/ifergyt/"><img src="images/instagram.jpg" alt=""><figcaption>Instagram</figcaption></a>
    <a href="https://www.facebook.com/IFerg-2022941574421321"><img src="images/facebook.jpg" alt=""><figcaption>Facebook</figcaption></a>
    <a href="https://discord.gg/FergFam"><img src="images/discord.jpg" alt=""><figcaption>Discord</figcaption></a>

    </div>

Solution

(Credits to @vio) Use the flex-wrap: wrap; property