0

I'd like to send a responsive newsletter. I know how to do it with my style.css 

<table cellpadding="0" cellspacing="0" border="0" align="center" width="600" bgcolor="#fff">

 <tbody> 
    <tr>
        <td style="padding-bottom:5px" valign="top">
            <table cellpadding="0" cellspacing="0" border="0" align="center" width="295" style="background:#ffffff">
                <tbody> 
                    <tr>
                        <td style="padding:15px;background-color:#fff">

                        image

                        </td>

                    </tr>
                </tbody>
            </table>
       </td>
       <td style="padding-bottom:5px" valign="top">
            <table cellpadding="0" cellspacing="0" border="0" align="center" width="295" style="background:#ffffff">
            <tbody>
                <tr>
                    <td style="padding:15px;background-color:#fff">
                        text
                    </td>

                </tr>
            </tbody>
        </table>
       </td>    
    </tr>   
    <tr>
        <td style="padding-bottom:5px" valign="top">
            <table cellpadding="0" cellspacing="0" border="0" align="center" width="295" style="background:#ffffff">
                <tbody>
                    <tr>    
                        <td style="padding:15px;background-color:#fff">
                            text
                        </td>

                    </tr>
                </tbody>
            </table>
        </td>

    </tr>    



 </tbody>
</table>

but I have one problem.

In desktop looks great, 

image                    text
text                     image

but in mobile

looks 

image
text
text
image

and I want it like

image
text
image
text

I found Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3 and I was wondering if there is something like that in tables.

I tried to change align="center" with aling="left" and align="right" but nothing.

Can anyone help me?

Community
  • 1
  • 1
Sak
  • 87
  • 2
  • 13

1 Answers1

0

Rather than getting the side-by-side effect by using two table cells (td's), you need to make each side a whole table, and use the align property on the table. This lets you have the left or right sides in either order when the email goes to one column.

Julie Ng's Antwort template has a good description + example of this technique:

https://github.com/InterNations/antwort/wiki/Columns-to-Rows-%28Version-1.0%29

Olex Ponomarenko
  • 905
  • 7
  • 10