Media CSS for custom header widgets – responsiveness issues

Hi,
I need guidance on a responsive @media css that will display the logo on the left, burger menu on the right, and then two custom text widgets that are stacked one above the other. Every time I make changes to the css for one device it messes up another that was perfectly fine. Yes, I know that a responsive css will be based on design and not device but I’m struggling. Could you provide some advice? Details in the private content. Thanks.