We want to retain as many features of our design across multiple platforms and viewports (rather than hiding certain parts with display: none or similar) but it's also important to consider the order in which things appear. At present, due to the order of the sidebar and main content sections of our markup, the sidebar will always want to display before the main content. It's obvious that a user with a more limited viewport should get the main content before the sidebar, otherwise they'll be seeing tangentially related content before the main content itself.

We could (and perhaps should) move our content above our navigation area, too. So that those with the smallest viewports get the content before anything else. This would certainly be the logical continuation of adhering to a "content first" maxim. However, in most instances, we'd like some navigation atop each page, so I'm happier simply swapping the order of the sidebar and content area in my HTML: making the content section come before the sidebar. For example, consider the following code:

<div id="sidebar">
  <p>here is the sidebar</p>
</div>
<div id="content"> 
  <p>here is the content</p>  
</div>

Instead of the preceding code, we have code as follows:

<div id="content"> 
  <p>here is the content</p>  
</div>
<div id="sidebar">
  <p>here is the sidebar</p>
</div>

Although we have altered the markup, the page still looks exactly the same in larger viewports due to the float:left and float:right properties on the sidebar and content areas. However, in the iPad, our content now appears first, with our secondary content (the sidebar) afterwards.

However, with our markup structured in the correct order I've also set about adding and altering more styles, specific to the 768 pixel wide viewport. This is what the media query now looks like:

@media screen and (max-width: 768px) {
  #wrapper,#header,#footer,#navigation {
    width: 768px; 
    margin: 0px;
  }  
  #logo { 
    text-align:center; 
  }
  #navigation { 
    text-align: center; 
    background-image: none; 
    border-top-color: #bfbfbf; 
    border-top-style: double; 
    border-top-width: 4px; 
    padding-top: 20px;
  }
  #navigation ul li a { 
    background-color: #dedede; 
    line-height: 60px; 
    font-size: 40px; 
  }
  #content, #sidebar { 
    margin-top: 20px; 
    padding-right: 10px; 
    padding-left: 10px; 
    width: 728px;
  }
  .oscarMain { 
    margin-right: 30px; 
    margin-top: 0px; 
    width: 150px; 
    height: 394px; 
  }
  #sidebar { 
    border-right: none; 
    border-top: 2px solid #e8e8e8; 
    padding-top: 20px; 
    margin-bottom: 20px; 
  }
  .sideBlock { 
    width: 46%; 
    float: left; 
  }
  .overHyped { 
    margin-top: 0px; 
    margin-left: 50px; 
  }
}

Remember, the styles added here will only affect screen devices with a viewport of 768 pixels or less. Larger viewports will ignore them. Plus, because these styles are after any existing styles, they will override them where relevant. The upshot being that larger viewports get the design they got before. Devices with a 768 pixel wide viewport, look as shown in the following screenshot:

It goes without saying, we're not going to win any design awards here but with just a few lines of CSS code within a media query, we have created an entirely different layout for a different viewport. What did we do?

First off, we reset all the content areas to the full width of the media query, as demonstrated in the following code snippet:

#wrapper,#header,#footer,#navigation {
    width: 768px; 
    margin: 0px;
}    

Then it was merely a matter of adding styles to alter the aesthetic layout of the elements. For example, the following code snippet changes the navigation size, layout, and background, so that it would be easier for tablet users (or any users with a viewport of 768 pixels or less) to select a navigation item:

#navigation { 
  text-align: center; 
  background-image: none; 
  border-top-color: #bfbfbf; 
  border-top-style: double; 
  border-top-width: 4px; 
  padding-top: 20px;
}
#navigation ul li a { 
  background-color: #dedede; 
  line-height: 60px; 
  font-size: 40px; 
}

We now have exactly the same content displayed with a different layout depending upon viewport size. Media queries are good, no? Let's have a party. While you fetch the champagne, I'll just take a look on my iPhone to see how it looks there… You can have a look at it in the following screenshot: