Different order of content on destop and responsive

This is the type of thing that should be easy to figure out but I'm stumped so any help is appreciated. In the below code example the idea is to alternate the starting content of each <tr> with either text or an image.

<td>Text here</td>
<td><img src="" /></td>
<td><img src="" /></td>
<td>Text Here</td>

An example of this can be found in the Blush template from the CM gallery.


The problem is that when it comes to responsive I can't change the content of each <tr> so that the image is always on top. I'm beginning to think that this is not possible. Note that the responsive version of the Blush template doesn't not do what I want.

Scoggwogg Scoggwogg, 2 years ago

Try this for when you want text on the left on desktop:

@media only screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 1) {                             
body[yahoo] .stack {width: 100% !important; float:left !important}
body[yahoo] .noMo {display:none !important}

<td class="noMo" height="1" style="font-size:0; line-height:0"/>
<td class="stack" rowspan="2"><img/></td>
<td class="stack">text</td>

roshodgekiss roshodgekiss, 2 years ago

Hi Bob and Scoggwogg, you might also want to check out our technique for changing the order of stacked elements. Using media queries and the direction CSS property (instead of the dir HTML attribute), you might be able to rig something up here. Let us know how you go :)

Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Bob Rooney, 2 years ago

Thanks for the responses guys. In the end I just went down the html attribute route but I'll be sure to check this out net time.


See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free