[Resolvido] Layout Responsivo

Galera o negócio é o seguinte. To aki brigando pra fazer um layout responsivo, justamente por que meu público alvo:

Tem gente que usa 2G em dumbphones e pessoas que usam Internet de 1GB/s num Macbook Retina, então já viram né?

O layout está assim: http://nossocariri.com.br/wp-content/themes/blog/estilos/desktop.html

No meu notebook, fica lindo, perfeitamente encaixado e panz. Mas na TV Fica com barras enormes do lado, no tablet fica cortando uma barra lateral e no Smartphone, bom, já deu pra entender!

Fiz um esboço para as versões mobile do site no fireworks.

http://imageshack.us/photo/my-images/521/mobilesite.png/

E fiz a versão pra desktops :

http://imageshack.us/photo/my-images/607/layouttabletedesktop.png/

Agora eu tô é quebrando a cabeça para transformar isso em CSS de uma forma que fique compatível. Eu já vi alguns sites onde a barra lateral "pula" para a parte de baixo do conteúdo. ...

Bom, acho que deu pra entender né?

Obs: Não liguem para os banners. Os preços são fictícios... :P