How to change the site layout only from CSS

Nowadays, if you have a website, you have to keep in mind that your website will be visited not only from PC with "high" resolutions, but from smartphones and tablets too.
So how can you make your site appear attractive on all devices, and not use too many resources? Your answer could be CSS.
CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices.
It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content.
CSS3 Media Query:

  @media screen and (max-device-width: 750px), screen and (max-width: 750px) {
    /* css code here */
  }

Using this code will change your layout to be user, for example, by mobile divices or small displays.
This is the media query to be used for iPad

  @media screen and (max-width: 768px) {
    /* css code here */
  }

And this one you should use for iPhone devices:

  @media screen and (max-width: 480px) {
    /* css code here */
  }