Hello!

Today I made some search on stacking and reverse stacking and finally found a method that works well for all email clients.
I used to use the well-known ghost table/cells technique but I found recently there that the use of th tag instead of td works well for normal stacking. By playing with the css property direction, I can also reverse stack easily now.

See below the example, important parts are commented :)

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="initial-scale=1.0">
  <title>MESSAGE.SUBJECT</title>
  <style rel="stylesheet">body,p{margin:0;padding:0;margin-bottom:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none}img{line-height:100%;outline:0;text-decoration:none;-ms-interpolation-mode:bicubic}a img{border:none}a:link{color:#ffffff;text-decoration:none}a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important;font-size:inherit!important;font-family:inherit!important;font-weight:inherit!important;line-height:inherit!important}button,div{margin:0!important;padding:0!important;display:block!important}.ReadMsgBody{width:100%}.ExternalClass{display:block!important;width:100%}.ExternalClass,.ExternalClass div,.ExternalClass font,.ExternalClass p,.ExternalClass span,.ExternalClass td{line-height:100%}table td{border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0}sup{position:relative;top:4px;line-height:7px!important;font-size:11px!important}.mobile_link a[href^=sms],.mobile_link a[href^=tel]{text-decoration:none;color:#e61744!important;pointer-events:auto;cursor:default}.no-detect a{text-decoration:none;color:#666;pointer-events:auto;cursor:default}.no-detect-local a{color:#00a6e0}span{color:inherit;border-bottom:none}span:hover{background-color:transparent}div.mobile td{mso-hide:all;height:0;font-size:0;max-height:0;line-height:0}</style>
  <style rel="stylesheet">
    @media only screen and (max-width:660px) {
      body {
        margin: 0 !important
      }

      table.container {
        width: 320px !important;
        padding: 0 0;
        min-width: 320px !important
      }
      /* the rule below allows the cells stacking on mobile */
      th {
        display: block !important
      }
    }
  </style>

  </head>

  <body>
  <table cellpadding="0" cellspacing="0" border="0" width="100%" class="body" align="center">
  <tr>
    <td valign="top" align="center">
      <table cellpadding="0" cellspacing="0" border="0" width="640" style="width:640px;min-width:640px" align="center" class="container">
        <tr>
          <td valign="top" align="center">
            <!-- add a css rule direction: rtl on your enclosing table for reverse stacking on mobile -->
            <table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#ffffff" class="bloc-main" style="background: #ffffff; direction: rtl;" align="center">
              <tr>
                  <!-- use th tag instead of td for the cells you want to stack on mobile -->
                  <!-- if you reverse stack on mobile, add css rule direction: ltr, to be sure the text itself isn't reversed -->
                  <!-- also, you should reverse the order of the th in your HTML code: if you want your text on the left and the image on the right, put first the th tag enclosing the image, then th with text -->
                  <!-- if you don't want reversed stack, just ignore all the direction rules on the table and the th and keep the right order for the th -->
                  <th style="direction: ltr;">
                      <img src="http://via.placeholder.com/320x100" width="320" alt="." border="0" style="display: block;">
                  </th>
                  <th style="direction: ltr;">
                      ipsum dolor sit amet consectetur, adipisicing elit. Vel distinctio unde nobis cum nesciunt ad quis omnis voluptatibus error, consectetur magni incidunt provident, ipsum est aliquam saepe suscipit dolorem. Ex tenetur aperiam rerum harum nemo labore, sunt, aut laborum fugit repudiandae in. Dolor tempora nemo non provident eum animi esse.
                  </th>
              </tr>
            </table>

          </td>
        </tr>
      </table>
    </td>
  </tr>
  </table>
  </body>
  </html>

Litmus Builder link : https://litmus.com/builder/d927389

Kind regards,
Julien