Single HTML rendering differently on desktop Vs iPad

I am trying to create a fluid/responsive layout where the same HTML would render diffe开发者_Go百科rently on different devices...Now I am aware of how to use CSS Media queries (for desktop/iPad,etc), fluid grids and all that stuff..

My question is let's say these are the 2 layouts i have for desktop/iPad..I need to design using a single HTML and have 2 separate CSS (which would be ofcouse through the media query device-width, etc)...How do I code my HTML such that the CSS would be able to render it differently?

Desktop layout

iPad layout

I have already gone through many articles like the one on; http://www.alistapart.com/articles/responsive-web-design/

But my question is is it possible to create extremely different views from a single HTML just through CSS (By that I would mean say a particular set of sections/cols showing on desktop is at a very differnt position for a different device)

---

Last I checked, you could add the media tag in the CSS file and it would automatically do this for you.

<link rel="stylesheet" href="" type="text/css" media="Screen" />
<link rel="stylesheet" href="" type="text/css" media="handheld" />

Example

<div id="header"></div>
    <div class="centerSection"></div>
    <div class="centerSection"></div>
    <div class="centerSection">
        <div></div><div></div>
    </div>
<div id="footer"></div>

Desktop

.centerSection { float:left; }

Mobile

.centerSection { clear:both; }

See here: W3 CSS Media