Responsive Html Email Template

Question

I am coding html email that should be good enough to render perfectly in all mobiles. I am expert in coding emails for desktop etc. and this email renders perfectly in all email clients and browsers, but I have to make it perfect for mobiles. My code structure is as follows:

<table>
<tr>
 <td width="200"> <table>complete left table </table></td>
 <td width="200"> <table>complete middle table </table></td>
 <td width="200"> <table>complete right table </table></td>

</tr>
 </table>

To make it good for mobiles I know I will need media queries but don't know to use it, can someone refer me related tutorial that may help me to do my specific case. Please see attached image, left is for desktops, right is for Mobiles:

Answer 1

Update: This answer has a big list of email resources including responsive design links

Here are some resources on responsive design:

• Litmus responsive how to guide (scroll to bottom)
• Campaign Monitor responsive guide

And here is a good template to get you started:

• Email on Acid's Responsive template