Note: When I move my blog to another server, I lost some images and links are not working. So I removed them. But the basic idea will remain the same. Feel free to reach out if you have any question.
I ran into a render issue of reverse stacking two long copy. And then finished with using media query CSS instead of "table align".
This post is used to give you a quick glance at what render issue I've met and how I deal with it.
So first, I took some time just now to google out two useful & awesome solution on dealing with the reverse stack. You should always take a quick view on these posts before you start working on your reverse stack email.
http://labs.actionrocket.co/how-to-make-content-reverse-stack-on-mobile
http://labs.actionrocket.co/reverse-stack-using-table-align-based-methods
So what I originally used is "table align" by wrapping two long copy with two tables. Put the right column at first with align="right", and put the left column next to it with align="left". Then put them under a table with fixed width.
But it ends with an unexpected gap in the famous word render engine.
This is a notorious issue of word engine which I've introduced in previous post. There are lost of way to deal with it. But after I wrapped each table with a td. The gap has gone. So I assume that side by side tables in one td will create gap issues. But this works well when there is no such long copy in it.
So then I switched with wrapping two sibling tds outside two tables. Then set display: table-header-group to the right td and display: table-footer-group to the left td.
And then it looks fine. But you should always do a render test after you do so. Because I found that there is a known issue with using table-xxxxxx-group. You will lose the width of the element that you attached with table-xxxxxx-group, cause it's acting like an inline element. So the width depends on how wide the content is.