This table will become linear, on mobile.	The HTML rendering engines on mobile browsers tend to be more capable and usually parse responsive CSS rules. This means we can add CSS just for those browsers, hidden behind @media rules (unfortunately, there's a version of Outlook on iOS which will ignore this CSS). Ut et ante vel purus feugiat lacinia. Integer hendrerit, elit et ultricies ullamcorper, massa tortor auctor arcu, fringilla elementum lorem ex nec lacus. Mauris ante urna, tincidunt non nibh nec, suscipit finibus sapien. Vivamus eget iaculis nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla iaculis, turpis vel sodales iaculis, ante ligula finibus ligula, et convallis eros magna at ligula. Phasellus scelerisque arcu a metus ornare, id tempor purus viverra. Sed venenatis mollis pharetra. Nulla vel sapien nibh. Mauris et commodo erat. Maecenas non arcu id risus imperdiet scelerisque id nec nisi. Mauris molestie accumsan faucibus.
Quisque non lectus luctus, facilisis libero at, gravida tortor.
In malesuada orci sed lacinia blandit.
Donec viverra finibus erat eu malesuada.
Ut at nulla eget erat bibendum ultricies ut ut augue.

The image and the text will swap places on mobile

Note that both the mobile and the desktop images need to appear in the markup. They can be the same image or different. In order to hide the mobile image from desktop, the width and height attributes should be 1, rather than zero. A value of zero will be ignored by some email clients, which will render the image as normal. Nunc ornare, ante vitae euismod gravida, sem est rhoncus quam, a suscipit massa velit vitae nibh. Nullam consectetur erat et maximus vehicula. Donec in ligula ornare, bibendum velit eu, ullamcorper odio.