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, 1 year 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, 1 year 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, 1 year 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.


Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free