Solution 1 :

I had a similar issue where I had to stack in reverse order. I also ran into issues with direction: rtl;. My solution was to skip the css and apply the rtl directly to the table.

<table>
  <tr>
    <td dir="ltr">A</td>
    <td dir="rtl">B</td>
  </tr>
</table>

Obviously you can’t apply an alignment at the <td> level because that will stick. But if you add a @media query, you can change the alignment in mobile from the desktop and the direction will not interfere.

Good luck.

Good luck.

Solution 2 :

SOLVED

I hope this will help anyone having the same problem in the future. So the general idea of using direction:rtl; did turn out to be the correct idea.

the hack with direction made me able to change the order to image first, text second, which is also the way the mobile view is supposed to be.

then set the two tables themselves back to dir="ltr"and style="direction:ltr;", so their content will be presented in western left to right style.

to set the tables in one line (make them inline) in outlook, add the html attribute align="right".

<table class="wrapper">
  <tr>
    <td dir="rtl" style="direction:rtl;>

      <table align="right" dir="ltr" style="direction:ltr;" class="panel">
        ...appearing right on desktop and on top in mobile
      </table>

      <table align="right" dir="ltr" style="direction:ltr;" class="panel">
        ...appearing left on desktop and bottom on mobile
      </table>

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

Problem :

i’m tasked with creating a template for and HTML email. Our designers (god bless ’em) had the great idea to create a fragment where on the left side, we have some text, and on the right side have an image, roughly like this:

enter image description here

On mobile they want the text to be after the image, but how can i achieve this? i proposed using 2 markups, but customer doesn’t want that. My second thought was using the CSS attribute direction: setting it to rtl and on mobile switching it back to ltr, therefore changing the order.but this fails, since the 2 elements next to each other are tables. Outlook ignores display:inline on the tables, so to make them next to each other, i have to use align="left". But align left kinda overwrites my direction: rtl attribute. anybody got any idea?

the described concept is working, but not in outlook, where the tables are shown below each other, since it ignores the display:inline.

(Since my components take up half of the space in clients >750px width and 100% of the space in clients < 750px, i need to use rtl in desktop and ltr in mobile. direction:rtl will not change the order of elements stacked on top of each other, only next to each other)

https://codepen.io/hergi/pen/YzPbKzX?editors=1100

<style type="text/css">      
  .wrapper {
    direction: rtl;
  }

  @media (max-width:749px) {
  .wrapper {
    direction: ltr !important;
  }

  }

  @media (min-width:750px) {

  .wrapper {
    direction: rtl !important;
  }
  }

</style>
<div class="wrapper" style="direction: rtl;">
  <table style="display: inline-block;">
    <tr>
      <td>
  <img src="https://kde.org/stuff/clipart/logo/kde-logo-white-blue-rounded-128x128.png" />        
      </td>
    </tr>
  </table>
  <table style="display: inline-block;">
    <tr>
      <td>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Google-Cloud-Storage-Logo.svg/128px-Google-Cloud-Storage-Logo.svg.png" />   
      </td>
    </tr>
  </table>
</div>

By

Leave a Reply

Your email address will not be published. Required fields are marked *