html - How to make tables stack, right over left, in responsive email? -


So this is my second responsive design email, so I'm stuck.

I have 2 tables when I look at the mobile so I am trying to stack. How to show 2 tables in desktop mode:

  | 1 | 2 |  

When viewed on mobile, I want to reveal tables like this:

  | 2 | | 1 |  

I have tried floating tables and using the position: Sure! Important But any help or guidance I can not get the desired effect will be greatly appreciated.

I used to do this in a way

how do you stack the column You can use dir = "rtl" to control. Here's an example:

  & lt; Table class = "deviceview" dir = "rtl" width = "100%" cellpadding = "0" cellpaction = "0" limit = "0" style = "border-fall: collapse; MSO-table-lapse: 0pt; MSO -Table-RSPS: 0pt; " & Gt; & Lt; TR & gt; & Lt; Td width = "50%" dir = "ltr" align = "right" square = "full" & gt; & Lt; P style = "mso-table-lspace: 0; mso-table-rspace: 0; padding: 0; margin: 0;" & Gt; & Lt; A href = "#" & gt; & Lt; Img src = "http://placehold.it/440x440&text=RIGHT" alt = "" border = "0" style = "display: block; width: 100%; height: auto;" / & gt; & Lt; / A & gt; & Lt; / P & gt; & Lt; / TD & gt; & Lt; Td width = "50%" dir = "ltr" align = "left" square = "full" & gt; & Lt; A href = "#" & gt; & Lt; Img src = "http://placehold.it/440x440&text=LEFT" alt = "" border = "0" style = "display: block; width: 100%; height: auto;" / & gt; & Lt; / A & gt; & Lt; / TD & gt; & Lt; / TR & gt; & Lt; / Table & gt;  

Questions with a @ media :

  @ media only screen and (max-width: 640px) {. Full {display: block; Width: 100%; }}  

is complete here


Comments

Popular posts from this blog

ios - How do I use CFArrayRef in Swift? -

eclipse plugin - Run java code error: Workspace is closed -

c - Error on building source code in VC 6 -