Change element order om different breakpoints

I am trying to create a nav bar where the logo is to the left with the menu in the middle (desktop). However I want the drop down to be on the left and logo in the middle on mobile portrait. But when I try, the desktop version gets messed up.

Is there any way to override the element order over different breakpoints?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)