Wireframing a responsive template where I want single rows (image w/ right caption) to wrap into a 2-column grid layout on mobile.

I have successfully manipulated content in the reverse (and more common) direction:

  • 2- and 3-column to single column
  • right- and left-captioned images (in a row) to single column with image on top or bottom

I've done these strictly through @media queries (and the help of some Outlook MSO hacks to preserve table alignment), but seems like it might also be possible with a fluid design according to this article by Campaign Monitor. I don't have much experience with truly fluid layouts, but would be curious to learn it if they're proven to be superior for mobile applications and could work for this new template.

So, fellow Litmus-lovers, I pose the following to thee:

  1. Have you has successfully created a responsive or fluid template that wraps single rows into columns on mobile?
  2. If so, did you use @media queries or a fluid grid? And could you share your secrets!?

Eternal love and some baking supplies await – thanks!