A Brief Explanation

I have created a responsive website that effectively has three views (desktop,tablet,mobile). Most of the design is changed via CSS using media queries (as it should be for responsive websites). However, part of the design is too complex to simply be manipulated via CSS as the HTML actually needs to be moved around the DOM. I know this doesn't sound too great but I cannot see how else I am meant to replicate this design without moving certain elements within my HTML.

So, with the above in mind, I now plan to write a function that creates custom events for each of the different ‘responsive views’. When each event is fired (in sync with the CSS media queries), it will execute some Javascript to move/animate any elements that cannot be manipulated enough using CSS.

My Question

Is this the best method to go about doing this? If, not, what other options do I have? Are there any existing libraries that I could look at and learn from?

My actual question is; What is the best method of moving elements in the DOM for responsive web design?

Further Explanation

If the above wasn’t clear, then read the following:

Consider these three different views:

Now consider the code for the first two views:

Desktop

<div id=some_container>

    <nav>

        <ul>

        </ul>

    <nav>

    <p>Some Text</p>

    <!-- The rest of the content -->

</div>

Tablet

<div id=some_container>

    <p>Some Text</p>

    <nav>

        <ul>

        </ul>

    <nav>

    <!-- The rest of the content -->

</div>

Notice the nav tag has been moved below the p tag...