How to intentionally wrap an element using css?

When I reach 440px I want to divide the nav in two lines: one for the icons, one for the button (every line should use 100% of the width).
I have no idea how to do this. Thank you.

This is what I got.

HTML:

<div class="content">
     <h1>Hi! I'm Lautaro Rojas</h1>
     <h2>So one at were where</h2>
     <nav>
        <a href="#"><img src="img/linkedin.png" alt="LinkedIn" /></a>
        <a href="#"><img src="img/github.png" alt="GitHub" /></a>
        <a href="#"><img src="img/instagram.png" alt="instagram" /></a>
       <button>View Resume</button>
    </nav>
</div>

CSS:

.content nav {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.content nav a {
    margin-right: 39px;
}

.content a img {
    width: 40px;
    height: 40px;
}

>Solution :

First you need to put your icons inside div:

<nav>
    <div>
        <a href="#"><img src="img/linkedin.png" alt="LinkedIn" /></a>
        <a href="#"><img src="img/github.png" alt="GitHub" /></a>
        <a href="#"><img src="img/instagram.png" alt="instagram" /></a>
    </div>
    <button>View Resume</button>
</nav>

And then you need to add this media tag to your css:

@media all and (max-width: 440px) {
    .content nav {
        flex-direction: column;
        align-items: center;
    }
}