Dynamics 365 Marketing: How to re-order the columns in outbound emails for mobile view?

Recently, I got the following business problem from my customer.

Business problem: Re-order the columns for display in mobile view. Below is the scenario that they wanted to achieve.

That is the image should always be on top if an email is viewed in mobile view only. The challenge is that this is not possible through UI using out-of-box capabilities. It is a product limitation by design. So how do we achieve it?

Solution: As I have mentioned, it is a product limitation by design. Blocks are wrapped left to right, same as text. There is no UI workaround, the user would have to change the order of columns. Below is what has been applied to achieve the target result.

To have this kind of wrapping behaviour on mobile the workaround is to use 2 tables with alignment and float style:

1. Remove the <th> element that was representing the second column and change data-container-width of the first to be 100. That leaves two tables inside one column.
2. Change the order of tables, so the image is in the first table.
3. Change the width attributes of tables to be 33% and 66% and add class outer in order to have 100% width on mobile.
4. Add to the first table float: right to style attribute and add attribute align=”right” to make the image table on the right for web email clients and Outlook desktop application.