The key to creating your desired layout in Pro's Header and Footer builders is understanding Flexbox. We have a tip for that here. It would also be best you know the interface well so I'd recommend you watch the Header and Footer introduction here.
Now for your questions:
You can achieve responsive design with Flexbox but you need to understand how it works. That would require some time to understand so what you could do here is utilize the Hide During Breakpoints option to hide your section and create a new one for mobile which you will then hide on desktop and laptop views.
You will need to set the Flex Basis of each of your containers to the same value like this.
But, as I've said earlier, for best results, you need to understand how Flexbox works because for example, the social buttons in my screenshot is aligned to the end by setting its container's Flex Layout > Horizontal to End.