Responsive Email - 2 Column Layout

An example of how to do a responsive 2-column layout in email where you want the right column to stack on top the left column on mobile layouts.

by vivek07mishra

HTML

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" yahoo="fix" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">

<!-- Wrapper -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
	<tr>
		<td width="100%" valign="top" bgcolor="#ffffff" style="padding-top:20px">
		
			<!-- Start Wrapper-->
			<table width="650" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" style="box-shadow: 0px 0px 30px #d4d4d4;" >
				<tr>
					<td width="100%">
			
						<!-- Start Header-->
						<table width="650" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#000000">
							<tr>
								<td width="100%" bgcolor="#000000">
			
			                            <!-- Logo -->
			                            <table border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
			                                <tr>
			                                    <td style="padding:30px 0px 30px 0px" width="100%" class="center logo">
			                                        <a href=""><img src="http://placehold.it/310x50&text=Logo" width="310" height="50" alt="Logo" border="0" /></a>
			                                    </td>
			                                </tr>
			                            </table><!-- End Logo -->
			                            
			                            <!-- Promo -->
			                            <table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" class="deviceWidth">
			                                <tr>
			                                    <td class="center" width="100%" bgcolor="#ff555d" style="font-size: 13px; color: #FFFFFF; font-weight: light; text-align: center; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 13px; vertical-align: middle; padding:10px 10px 10px 10px; font-style:normal">
			                                        SPACE FOR SOME INTRO...

CSS

.ReadMsgBody {width: 100%; background-color: #ffffff;}
.ExternalClass {width: 100%; background-color: #ffffff;}
body	 {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;font-family: Georgia, Times, serif}
table {border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }

@media only screen and (max-width: 640px)  {
                body[yahoo] .deviceWidth {width:440px!important; }	
                body[yahoo] .center {text-align: center !important;}	 
                
                body[yahoo] .hide-medium {
                    display:none;
                }
                
                body[yahoo] .full {
                    display:block;
                    width:100%;
                }
        }
        
@media only screen and (max-width: 479px) {
                body[yahoo] .deviceWidth {width:320px!important; }	
                body[yahoo] .center {text-align: center !important;}	 
                
                body[yahoo] .logo img {
                    width:90% !important;
                    height:auto;
                }
                
                body[yahoo] .hide-small {
                    display:none;
                }
                
                body[yahoo] .full {
                    display:block;
                    width:100%;
                }
                
                body[yahoo] .pull-top {
                    float:left;
                }
                
                body[yahoo] .pull-bottom {
                    float:right;
                }
                
        }