html - 电子邮件布局。更改响应表中的 tr 顺序

Question

我正在为时事通讯创建布局。通常这必须是非常静态的，但我使用 Mailchimp 指南来实现一些响应能力。它运行良好，但问题是我希望第二张图片出现在文本之前(示例链接中的问题非常明显，很难解释)。基本上，我想实现一些类似于使用推拉使用 Bootstrap 所做的事情，例如，在调整大小时，放置在第二位的图像成为第一位。

当布局为单列时，先是图像，然后是文本。

示例:https://codepen.io/SergiOca/pen/vmqMoZ?editors=1010

 @media only screen and (max-width: 480px){
        #templateColumns{
            width:100% !important;
        }
    .templateColumnContainer{
        display:block !important;
        width:100% !important;
    }

    .columnImage{
        height:auto !important;
        max-width:480px !important;
        width:100% !important;
    }

    .leftColumnContent{
        font-size:16px !important;
        line-height:125% !important;
    }

    .rightColumnContent{
        font-size:16px !important;
        line-height:125% !important;
    }
}

<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
    <tr>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="leftColumnContent">

                     <img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />

                    </td>
                </tr>

            </table>
        </td>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="rightColumnContent">
                         <p style ="font-size:21px; color:#009DE0; width: 125px; line-height: 22px;";> Selección de profesionales en plantilla o freelance.</p>
                <p style="font-size: 13px; line-height: 19px; width: 218px;"> A partir de un Job description acordado con el cliente, procedemos a entrevistar y a validar técnicamente a los candidatos que cumplan con los requisitos técnicos y personales, previamente establecidos.</p>
                    </td>
                </tr>

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



<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
    <tr>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="leftColumnContent">

                      <p style ="font-size:21px; color:#009DE0; width: 125px; line-height: 22px;";> Selección de profesionales en plantilla o freelance.</p>
                <p style="font-size: 13px; line-height: 19px; width: 218px;"> A partir de un Job description acordado con el cliente, procedemos a entrevistar y a validar técnicamente a los candidatos que cumplan con los requisitos técnicos y personales, previamente establecidos.</p>

                    </td>
                </tr>

            </table>
        </td>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="rightColumnContent">

                    <img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />

                    </td>
                </tr>

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


<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
    <tr>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="leftColumnContent">

                     <img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />

                    </td>
                </tr>

            </table>
        </td>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="rightColumnContent">
                         <p style ="font-size:21px; color:#009DE0; width: 125px; line-height: 22px;";> Selección de profesionales en plantilla o freelance.</p>
                <p style="font-size: 13px; line-height: 19px; width: 218px;"> A partir de un Job description acordado con el cliente, procedemos a entrevistar y a validar técnicamente a los candidatos que cumplan con los requisitos técnicos y personales, previamente establecidos.</p>
                    </td>
                </tr>

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

Answer 1

我儿子，你需要的是生活的方向。

您可以应用 css 属性 direction 来交换表格单元格的顺序。 Direction 可以应用于文本或行内 block 元素。

您可以以不同的方式应用它。

<row dir="rtl">
<td dir="rtl">
.main-content {direction: rtl;  /* Right to Left */}

这是如何应用行或 td 的代码示例:

<!-- header -->
<container class="header">
  <row dir="rtl">
    <columns large="6" small="12" class="text-right" dir="rtl">
      <p class="text-right" style="color: #432a6f; font-size: 12px; text-decoration: underline;"><a href="<%@ include view='MirrorPageUrl' %>" target="_blank">View this email on the web</a></p>
    </columns>
    <columns large="6" small="12" dir="rtl">
      <a href="http://example.com" target="_blank"><img style="display: inline-block" border="0" alt="Image name" src="http://example.com/sample.png" width="184" height="45"></a>
    </columns>
  </row>
</container>
<!-- .header -->

您可以尝试从父元素继承 rtl ot ltr。

我建议将方向放在@media 查询中表的类上，以便您可以在移动 View 中交换它们。像这样:

@media only screen and (max-width: 600px) {
  .leftColumnContent {direction: rtl}
}

有关方向的更多信息，请查看: https://css-tricks.com/almanac/properties/d/direction/

祝你好运。