Different layout views of an email module between desktop and mobile

[tvassalotti]

I'm trying to design an email using the drag and drop editor such that my main content module displays differently on desktop and mobile. Below are screenshots of the content. First is the display for desktop, which is what I'm aiming for.

Current Desktop

Second is the way it displays on mobile. This is not ideal. The ideal state is Image --> Text --> Image --> Text

Current Mobile

Here is the way it is built in the drag and drop.Module layout

Now, I understand why the mobile is displaying that way because of how the modules are placed. However, I'm wondering if there is a way to use the drag and drop modules to perform such a view.

One option I've thought of is using two module groups and adding "display: none;" styles along with the media queries, but if there's a way to avoid doing that then I'd prefer not to.

Thanks!

[MikeCormack]

Dispaly:none doesn't work in email, in the tests I have done it only works if they 'open in browser'

I would try relative positioning with media queries that swap them over for the larger screens, then the order would be retained on the mobile view.

[MikeCormack]

unfortunately I couldn't get media queries to work with the inline editor, but conceptually the relative positioning works

create a new css file and have

position:relative; left:50%

on the one on the left

position:relative; right:50%;

on the one on the right,

then at the break point have them

reset with 0 and the ordering is kept as you want it