When we created a client website we wanted to make the home page differ to the other pages in layout, but to reunify it in mobile view – in this case the menu needed to shift from the middle of the home page back to the top in mobile view. There are ways of doing this in CSS but adding loads of CSS seemed a less pragmatic way to do it. Our response was to use jQuery:-

What the jQuery does is listen to the page width on 'resize' and if it is less than 767px (and on a page with a specific div i.e. .home-headline)  it takes the navigation '.nav-menu' and inserts it after a header div (#branding). When the page resizes to more than 767px it then puts it back. A  simple addition of the jQuery document ready declaration on the base to evoke the responsive layout on load and not just window resize. Otherwise when the user opens initially in mobile view (i.e. not resizing the window) the responsive action immediately loads. View it in action on the client home page here.