Adding Social Icons to Footer and aligning them on mobile

Hi - I have added some social icons to my footer bar widget (using Lightweight Social Icons plugin) and then used this CSS to line them up properly, which I found here https://generatepress.com/forums/topic/adding-logo-and-social-media-in-the-footer-without-widget/.

.footer-bar {
    display: flex;
    width: 80%;
    align-items: center;
    
}
.footer-bar aside {
    margin-bottom: 0 !important;
}
.footer-bar aside:nth-child(2) {
    margin: auto;
}

But whilst this looks fine on desktop, it doesn't line up right on mobile. It stacks the social icons to the right of the menu. I want the social icons to appear below the menu area (and above the copyright text) and line up horizontally.

Is this a case of tweaking the CSS or am I going about this the wrong way and should be using hooks? Either way, can you help me out with how?

Thanks