I have the following header on my page:

[![Desktop screenshot](https://i.stack.imgur.com/gSvyG.png)](https://i.stack.imgur.com/gSvyG.png)

When I shrink the window, the email disappears pretty quickly for anything smaller than desktop size. 

What can I do in CSS to influence the breakpoints, and positioning of the elements on certain breakpoints?

Also, I'd like the phone number and email address to be centered and stacked on top of each other at mobile size, at the top there. At the moment, the email is missing, and the phone number stays to the left:

[![Mobile screenshot](https://i.stack.imgur.com/xDC90.png)](https://i.stack.imgur.com/xDC90.png)