Moving Elements in DOM for Responsive Web Design

Question

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...

Answer 1

You can try this:

Assuming this HTML:

<div id="some_container">     <nav id="n1">         <ul>             <li>1</li>             <li>2</li>         </ul>     </nav>     <p>Some Text</p>     <nav id="n2">         <ul>             <li>1</li>             <li>2</li>         </ul>     </nav> </div> 

You will only need the following css:

#n1{     display:none; }  @media only screen  and (min-width : 600px) {     #n1{         display:block;     }     #n2{         display:none;     } } 

Fiddle example

This basically toggles which of the two navigation sections you see, depending on the screen size. It has the disadvantage of duplicated html in your source (the difference in the amount of data is really negligible), but you won't need JavaScript to get the effect, and JS disabled devices will only show one ul.

The great thing about this way is that it's very scale-able. Need this "effect" on a different page? You'll only have to edit [u]that[/u] page. No messing around with JavaScript, hard-coding new classes / cases.