响应式电子邮件：移动端的反向块堆叠设计

Question

所以问题的本质：我怎样才能让移动设备的积木以相反的顺序堆叠？ 一些插图：

全幅设计示例

移动设计示例和所需更改

我为这个东西使用了 mjml 电子邮件框架：

<mjml version="3.3.3"><mj-body background-color="#ffffff">
<mj-section background-color="SILVER" text-align="center" vertical-align="middle"  padding="40px 0 25px">
  <mj-column width="50%" align="middle" >
    <mj-image align="middle" src="https://bellard.org/bpg/2.png" target="_blank" width="121px"></mj-image>
  </mj-column>
  <mj-column background-color="SILVER" width="50%">
    <mj-text  background-color="SILVER" align="middle" color="#ffffff" font-size="22px" font-weight="bold">
        Text Block1
    </mj-text>
  </mj-column>
</mj-section>
<mj-section background-color="#ffffff" background-repeat="repeat" padding="40px 0 25px" text-align="center" vertical-align="middle">
  <mj-column background-color="#ffffff" width="50%">
    <mj-text  background-color="#ffffff" align="middle" color="black" font-size="22px" font-weight="bold">
        Text Block2
        </mj-text>
  </mj-column>
  <mj-column width="50%" align="middle" >
    <mj-image align="middle" src="https://vignette.wikia.nocookie.net/arianagrande/images/7/70/Example.png/revision/latest?cb=20160301231046" target="_blank" width="121px"></mj-image>
  </mj-column> 
</mj-section>    
<mj-section background-color="SILVER" background-repeat="repeat" padding="40px 0 25px" text-align="center" vertical-align="middle">
  <mj-column width="50%" align="middle" >
    <mj-image align="middle" src="https://www.axialis.com/tutorials/sample/logo-ps.png" target="_blank" width="121px"></mj-image>
  </mj-column>
  <mj-column background-color="SILVER" width="50%">
    <mj-text  background-color="SILVER" align="middle" color="#ffffff" font-size="22px" font-weight="bold">
        Text Block3
    </mj-text>
  </mj-column>
</mj-section>    

纯HTML可以在右上角的“查看HTML”标签中查看https://mjml.io/try-it-live/SJxb4Lo4m。

提前感谢您的帮助！

Answer 1

以下代码完全按照您的要求运行！我刚刚在代码的第 2 部分中添加了“direction”属性，我们要在其中更改显示的方向。

<mjml version="3.3.3">
  <mj-body background-color="#ffffff">
    <mj-section background-color="SILVER" text-align="center" vertical-align="middle"  padding="40px 0 25px">
      <mj-column width="50%" align="middle" >
        <mj-image align="middle" src="https://bellard.org/bpg/2.png" target="_blank" width="121px"></mj-image>
      </mj-column>
      <mj-column background-color="SILVER" width="50%">
        <mj-text  background-color="SILVER" align="middle" color="#ffffff" font-size="22px" font-weight="bold">
            Text Block1
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section background-color="#ffffff" background-repeat="repeat" padding="40px 0 25px" text-align="center" vertical-align="middle" direction="rtl" >
      
      <mj-column width="50%" align="middle" direction="ltr" >
        <mj-image align="middle" src="https://vignette.wikia.nocookie.net/arianagrande/images/7/70/Example.png/revision/latest?cb=20160301231046" target="_blank" width="121px"></mj-image>
      </mj-column> 
      <mj-column background-color="#ffffff" width="50%" direction="ltr">
        <mj-text  background-color="#ffffff" align="middle" color="black" font-size="22px" font-weight="bold">
            Text Block2
            </mj-text>
      </mj-column>
    </mj-section>    
    <mj-section background-color="SILVER" background-repeat="repeat" padding="40px 0 25px" text-align="center" vertical-align="middle">
      <mj-column width="50%" align="middle" >
        <mj-image align="middle" src="https://www.axialis.com/tutorials/sample/logo-ps.png" target="_blank" width="121px"></mj-image>
      </mj-column>
      <mj-column background-color="SILVER" width="50%">
        <mj-text  background-color="SILVER" align="middle" color="#ffffff" font-size="22px" font-weight="bold">
            Text Block3
        </mj-text>
      </mj-column>
    </mj-section>    
  </mj-body>
</mjml>