Search code examples
htmlresponsive-designhtml-emailmjmlresponsive-emails

Responsive email: reverse block stacking design for mobile

So essence of question: how can i make blocks stack in reverse order for mobile devices? A few illustrations:

Example of design for full width

Example of design for full width

Example of design for mobile and changes wanted

Example of design for mobile and changes wanted

I used mjml email framework for this thingy:

<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>

Pure HTML for it can be viewed https://mjml.io/try-it-live/SJxb4Lo4m in "View HTML" tab at top right.

Thanks in advance for help!

Solution

  • Following code is working exactly how you wanted! I've just added "direction" attribute in section #2 of your code, where we want to change the direction of the display.

    <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>