{"id":37084,"date":"2021-10-04T10:00:00","date_gmt":"2021-10-04T14:00:00","guid":{"rendered":"https:\/\/www.litmus.com\/?p=37084"},"modified":"2025-01-24T09:31:25","modified_gmt":"2025-01-24T14:31:25","slug":"mobile-responsive-email-stacking","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/mobile-responsive-email-stacking","title":{"rendered":"How to Stack Columns in Responsive Emails"},"content":{"rendered":"\n\n\t<div id=\"simple-text-block-block_6a7c3d71fef8ef0cf8d4d0944b65249a\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>Sooooo, I\u2019m going to date myself for a little bit here, but stick with me.<\/p>\n<p>Back when smartphones first started becoming something that email marketers had to deal with, the common solution I saw from everyone was single-column emails. Which makes sense since not many mobile email clients supported media queries. The easiest choice was to avoid the issue altogether by sticking with single-column designs in desktop that easily resized for mobile.<\/p>\n<p>But with more media query support these days, you can create more interesting designs that take advantage of responsive coding to have your email design respond to the screen size that your subscribers are viewing them on.<\/p>\n<p>I\u2019ll walk you through:<\/p>\n<ul>\n<li><a rel=\"noopener\" href=\"#stacking-order\">Normal vs. reverse stacking order<\/a><\/li>\n<li><a rel=\"noopener\" href=\"#code\">2 ways to code content that stacks<\/a><\/li>\n<li><a rel=\"noopener\" href=\"#no-mobile-stacking\">When you shouldn\u2019t stack mobile content<\/a><\/li>\n<\/ul>\n<h2>Why you should stack columns on mobile<\/h2>\n<p>Mobile devices give a very limited viewing screen, and the ideal design for mobile devices is one column. But we don\u2019t want to limit ourselves to single-column designs on desktop where we have loads of space. Enter media queries to let you stack content on mobile to make sure your content is optimized for the smaller screen.<\/p>\n<table>\n<thead>\n<tr>\n<th style=\"text-align: center;\">Desktop<\/th>\n<th style=\"text-align: center;\">Mobile<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td valign=\"top\"><img decoding=\"async\" class=\"alignleft wp-image-37091 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/desktop-email-from-lulu-and-georgia.png\" alt=\"desktop email from lulu and georgia\" width=\"800\" height=\"1601\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/desktop-email-from-lulu-and-georgia.png 800w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/desktop-email-from-lulu-and-georgia-150x300.png 150w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/desktop-email-from-lulu-and-georgia-512x1024.png 512w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/desktop-email-from-lulu-and-georgia-768x1536.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/td>\n<td valign=\"top\"><img decoding=\"async\" class=\"alignleft wp-image-37092 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/mobile-email-from-lulu-and-georgia.png.png\" alt=\"mobile email from lulu and georgia.png\" width=\"173\" height=\"847\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/mobile-email-from-lulu-and-georgia.png.png 173w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/mobile-email-from-lulu-and-georgia.png-61x300.png 61w\" sizes=\"(max-width: 173px) 100vw, 173px\" \/><\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><i>Source: <\/i><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/reallygoodemails.com\/emails\/new-arrivals-just-for-you\" target=\"_blank\" rel=\"noopener\"><i>Really Good Emails<\/i><\/a><\/td>\n<td valign=\"top\"><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p>Keeping email content in the same desktop layout results in very tiny text and images or squished content on mobile devices. It\u2019s not a good user experience as your subscribers will most likely have difficulty reading your content, like this email as wide as the screen on some mobile phones:<\/p>\n<figure id=\"attachment_37094\" aria-describedby=\"caption-attachment-37094\" style=\"width: 240px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"wp-image-37094\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/a-kids-book-about-320px-e1633211014319.png\" alt=\"a kids book about email\" width=\"240\" height=\"622\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/a-kids-book-about-320px-e1633211014319.png 314w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/a-kids-book-about-320px-e1633211014319-116x300.png 116w\" sizes=\"(max-width: 240px) 100vw, 240px\" \/><figcaption id=\"caption-attachment-37094\" class=\"wp-caption-text\"><i>Source: <\/i><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/reallygoodemails.com\/emails\/new-moms-will-love-our-little-books\" target=\"_blank\" rel=\"noopener\"><i>Really Good Emails<\/i><\/a><\/figcaption><\/figure>\n<p>Do your subscribers a favor and make sure your emails look their best in every reading environment.<\/p>\n<h2 id=\"stacking-order\">Stacking methods for email design<\/h2>\n<p>When you do want to stack columns on top of each other, there are two different ways the content can stack: with the left column on top (normal stacking) or the right column on top (reverse stacking).<\/p>\n<h3>Normal stacking<\/h3>\n<p>Normal stacking is the most common form of stacking. It takes the content in the left column and stacks it on top of the content in the right column, like so:<\/p>\n<img decoding=\"async\" class=\"size-full wp-image-37093 alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/normal-stacking.gif\" alt=\"normal stacking\" width=\"584\" height=\"666\" \/>\n<h3>Reverse stacking<\/h3>\n<p>Reverse stacking is when the content in the left column stacks <i>under<\/i> the content in the right column. It is most commonly used for the middle row if you have a Z-pattern on desktop, but you want the rows to all look the same on mobile. In this example the first and last rows are normal stacking, but the second row is a reverse stacking column:<\/p>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-37095\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/reverse-stacking.gif\" alt=\"reverse stacking\" width=\"618\" height=\"657\" \/>\n<h2 id=\"code\">2 ways to code columns that stack on mobile<\/h2>\n<p>There are a couple different ways to code stacking columns in any <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/state-of-email-design-tools\" rel=\"noopener\" target=\"_blank\">email design tool<\/a>. I\u2019ll walk you through using CSS media queries and then a hybrid coding method. Test them out and see what works best for you.<\/p>\n<h3>Using CSS media queries<\/h3>\n<p>You can create two columns simply by creating a two-column table and then using classes to have the columns stack.<\/p>\n<p>The CSS would look like this:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\"> &lt;style>\n     @media screen and (max-width:600px) {\n          .block { display: block !important; width: 100% !important; }\n     }\n  &lt;\/style><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_91c9bdeb1e9920affef935e0b99b8dfa\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>And the HTML would look like this:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\"> &lt;table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" role=\"presentation\" style=\"width:600px;\">\n     &lt;tr>\n          &lt;td class=\"block\" align=\"left\" valign=\"top\" style=\"padding:10px 0;\" width=\"50%\">\n                &lt;img src=\"http:\/\/via.placeholder.com\/300\">\n        &lt;\/td>\n          &lt;td class=\"block\" align=\"left\" valign=\"top\" style=\"padding:10px 0 10px 10px;\" width=\"50%\">\n               &lt;p style=\"font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;\">Somebody once told me the world is gonna roll me. I ain't the sharpest tool in the shed. She was looking kind of dumb with her finger and her thumb in the shape of an \"L\" on her forehead.&lt;\/p>\n        &lt;\/td>\n     &lt;\/tr>\n &lt;\/table><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_d6a30a42dc8197268835437c569a17c4\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>The block class turns the table cells into blocks on mobile, and the content behaves accordingly and automatically stacks on mobile. This results in a normal stack.<\/p>\n<p>If you want to create a reverse stack, you can use table-header-group and table-footer-group as the display property value in your CSS, like so:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\"> &lt;style>\n     @media screen and (max-width:600px) {\n          .top { display: table-header-group !important; width: 100% !important; }\n          .bottom { display: table-footer-group !important; width: 100% !important; }\n     }\n  &lt;\/style><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_2904efb899f49e9900f65b1c6adc94a4\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>And the HTML becomes:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" role=\"presentation\" style=\"width:600px;\">\n      &lt;tr>\n            &lt;td class=\"bottom\" align=\"left\" valign=\"top\" style=\"padding:10px 0;\" width=\"50%\">\n                     &lt;img src=\"http:\/\/via.placeholder.com\/300\">\n            &lt;\/td>\n            &lt;td class=\"top\" align=\"left\" valign=\"top\" style=\"padding:10px 0 10px 10px;\" width=\"50%\">\n                  &lt;p style=\"font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;\">Well the years start coming and they don't stop coming. Fed to the rules and I hit the ground running. Didn't make sense not to live for fun. Your brain gets smart but your head gets dumb.&lt;\/p>\n            &lt;\/td>\n      &lt;\/tr>\n &lt;\/table><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_ea669c3d5dba80e1f92f2d70f7639804\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<h3>Hybrid coding<\/h3>\n<p>This is the method I use. It is much more code heavy, but it has saved my butt on several occasions when email clients didn\u2019t support media queries. (Mad props to Nicole Merlin for her <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/webdesign.tutsplus.com\/tutorials\/creating-a-future-proof-responsive-email-without-media-queries--cms-23919\" target=\"_blank\" rel=\"noopener\">tutorial<\/a> that first introduced me to hybrid coding.)<\/p>\n<p>In this case, you use two divs with <code>display: inline-block<\/code>. This keeps your content sitting next to each other on desktop and pushes them to stack on mobile. Here\u2019s what your code would look like:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;div style=\"display:inline-block;vertical-align:top;\">\n      &lt;table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" role=\"presentation\" style=\"width: 300px;\">\n            &lt;tr>\n                  &lt;td align=\"left\" valign=\"top\">\n                        &lt;img src=\"http:\/\/via.placeholder.com\/300\">\n                  &lt;\/td>\n            &lt;\/tr>\n      &lt;\/table>\n&lt;\/div>\n&lt;div style=\"display:inline-block;vertical-align:top;\">\n      &lt;table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" role=\"presentation\" style=\"width:300px;\">\n            &lt;tr>\n                  &lt;td align=\"left\" valign=\"top\" style=\"padding-left: 10px;\">\n                        &lt;p style=\"font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;\">So much to do, so much to see, so what's wrong with taking the back streets? You'll never know if you don't go. You'll never shine if you don't glow.&lt;\/p>\n                  &lt;\/td>\n            &lt;\/tr>\n      &lt;\/table>\n&lt;\/div><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_2275241b10cf5b0cefe252a7a6a5bfa3\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>Then we wrap all of that in a table cell and set the font size to 0 so that no extra space is added around the divs and align the whole thing in the center of the table cell:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">     &lt;tr>\n          &lt;td style=\"font-size:0;\" align=\"center\" valign=\"top\">\n               &lt;div style=\"display:inline-block;vertical-align:top;\">\n                     &lt;table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" role=\"presentation\" style=\"width: 300px;\">\n                           &lt;tr>\n                                 &lt;td align=\"left\" valign=\"top\">\n                                       &lt;img src=\"http:\/\/via.placeholder.com\/300\">\n                                 &lt;\/td>\n                           &lt;\/tr>\n                     &lt;\/table>\n               &lt;\/div>\n               &lt;div style=\"display:inline-block;vertical-align:top;\">\n                     &lt;table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" role=\"presentation\" style=\"width:300px;\">\n                           &lt;tr>\n                                 &lt;td align=\"left\" valign=\"top\" style=\"padding-left: 10px;\">\n                                       &lt;p style=\"font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;\">So much to do, so much to see, so what's wrong with taking the back streets? You'll never know if you don't go. You'll never shine if you don't glow.&lt;\/p>\n                                 &lt;\/td>\n                           &lt;\/tr>\n                     &lt;\/table>\n               &lt;\/div>\n          &lt;\/td>\n     &lt;\/tr><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_72c4945d9266df0879dec81d713e489d\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>But wait! Because Outlook doesn\u2019t support divs, you also need to add in some ghost tables around everything to get it to work in Outlook:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">     &lt;tr>\n          &lt;td style=\"font-size:0;\" align=\"center\" valign=\"top\">\n               &lt;!--[if (gte mso 9)|(IE)]>\n               &lt;table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" role=\"presentation\" style=\"width: 100%;\">\n               &lt;tr>\n               &lt;td valign=\"top\" style=\"width: 300px;\">\n               &lt;![endif]-->\n                    &lt;div style=\"display:inline-block;vertical-align:top;\">\n                          &lt;table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" role=\"presentation\" style=\"width: 300px;\">\n                                &lt;tr>\n                                      &lt;td align=\"left\" valign=\"top\">\n                                            &lt;img src=\"http:\/\/via.placeholder.com\/300\">\n                                      &lt;\/td>\n                                &lt;\/tr>\n                          &lt;\/table>\n                    &lt;\/div>\n               &lt;!--[if (gte mso 9)|(IE)]>\n               &lt;\/td>&lt;td valign=\"top\" style=\"width:300px;\">\n               &lt;![endif]-->\n                    &lt;div style=\"display:inline-block;vertical-align:top;\">\n                          &lt;table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" role=\"presentation\" style=\"width:300px;\">\n                                &lt;tr>\n                                      &lt;td align=\"left\" valign=\"top\" style=\"padding-left: 10px;\">\n                                            &lt;p style=\"font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;\">So much to do, so much to see, so what's wrong with taking the back streets? You'll never know if you don't go. You'll never shine if you don't glow.&lt;\/p>\n                                      &lt;\/td>\n                                &lt;\/tr>\n                          &lt;\/table>\n                    &lt;\/div>\n               &lt;!--[if (gte mso 9)|(IE)]>\n               &lt;\/td>\n               &lt;\/tr>\n               &lt;\/table>\n               &lt;![endif]-->\n          &lt;\/td>\n     &lt;\/tr><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_53f113c0293361e760f731a985dc05d8\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>This code works well without media queries if you\u2019re using columns that are 50% of your containing table. But if you\u2019re using smaller columns, you\u2019ll have to add some media queries to update the width to 100% on mobile. More on that below.<\/p>\n<p>The reverse stacking version of this takes advantage of the dir attribute to order the divs in the opposite order. We add dir=\u201drtl\u201d on the cell containing the two columns, and then each column needs to have dir=\u201dltr\u201d added to the table in order to have the content display correctly:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">     &lt;tr>\n          &lt;td style=\"font-size:0;\" align=\"left\" valign=\"top\" dir=\"rtl\">\n               &lt;!--[if (gte mso 9)|(IE)]>\n               &lt;table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" role=\"presentation\" style=\"width: 100%;\">\n               &lt;tr>\n               &lt;td valign=\"top\" style=\"width: 300px;\">\n               &lt;![endif]-->\n                    &lt;div style=\"display:inline-block;vertical-align:top;\">\n                          &lt;table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" role=\"presentation\" style=\"width: 300px;\" dir=\u201dltr\u201d>\n                                &lt;tr>\n                                      &lt;td align=\"left\" valign=\"top\">\n                                            &lt;p style=\"font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;\">Hey now, you're an all-star, get your game on, go play. Hey now, you're a rock star, get the show on, get paid. And all that glitters is gold. Only shooting stars break the mold.&lt;\/p>\n                                      &lt;\/td>\n                                &lt;\/tr>\n                          &lt;\/table>\n                    &lt;\/div>\n               &lt;!--[if (gte mso 9)|(IE)]>\n               &lt;\/td>&lt;td valign=\"top\" style=\"width:300px;\">\n               &lt;![endif]-->\n                    &lt;div style=\"display:inline-block;vertical-align:top;\">\n                          &lt;table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" role=\"presentation\" style=\"width:300px;\" dir=\u201dltr\u201d>\n                                &lt;tr>\n                                      &lt;td align=\"left\" valign=\"top\" style=\"padding-left: 10px;\">\n                                            &lt;img src=\"http:\/\/via.placeholder.com\/300\">\n                                      &lt;\/td>\n                                &lt;\/tr>\n                          &lt;\/table>\n                    &lt;\/div>\n               &lt;!--[if (gte mso 9)|(IE)]>\n               &lt;\/td>\n               &lt;\/tr>\n               &lt;\/table>\n               &lt;![endif]-->\n          &lt;\/td>\n     &lt;\/tr><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_473b97e1c78e4ee98c33d41c555f5460\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>Something to keep in mind when coding with the reverse stacking hybrid version: Whatever is in that first &lt;div&gt; is going to end up in the <i>right<\/i> column, which is counter intuitive and takes some getting used to. It is also not always the best for accessibility.<\/p>\n<h4>Coding for two different column widths<\/h4>\n<p>As mentioned above, if you want to use different sized table cells, you\u2019ll have to add in media queries to change those table cells for mobile. The most common case of this is using a 100% class which you may already have set up in your CSS. If not, it could look something like this:<\/p>\n<p><code>.w100p { width: 100% !important; }<\/code><\/p>\n<p>And then adding that class to the div and table in your HTML like so (this example has a column that\u2019s 100px wide and another that\u2019s 500px wide):<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">     &lt;tr>\n          &lt;td style=\"font-size:0;\" align=\"center\" valign=\"top\">\n               &lt;!--[if (gte mso 9)|(IE)]>\n               &lt;table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" role=\"presentation\" style=\"width: 100%;\">\n               &lt;tr>\n               &lt;td valign=\"top\" style=\"width: 100px;\">\n               &lt;![endif]-->\n                    &lt;div class=\u201dw100p\u201d style=\"display:inline-block;vertical-align:top;\">\n                          &lt;table class=\u201dw100p\u201d cellpadding=\"0\" cellspacing=\"0\" border=\"0\" role=\"presentation\" style=\"width: 100px;\">\n                                &lt;tr>\n                                      &lt;td align=\"left\" valign=\"top\">\n                                            &lt;img src=\"http:\/\/via.placeholder.com\/300\">\n                                      &lt;\/td>\n                                &lt;\/tr>\n                          &lt;\/table>\n                    &lt;\/div>\n               &lt;!--[if (gte mso 9)|(IE)]>\n               &lt;\/td>&lt;td valign=\"top\" style=\"width:500px;\">\n               &lt;![endif]-->\n                    &lt;div class=\u201dw100p\u201d style=\"display:inline-block;vertical-align:top;\">\n                          &lt;table class=\u201dw100p\u201d cellpadding=\"0\" cellspacing=\"0\" border=\"0\" role=\"presentation\" style=\"width:500px;\">\n                                &lt;tr>\n                                      &lt;td align=\"left\" valign=\"top\" style=\"padding-left: 10px;\">\n                                            &lt;p style=\"font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;\">So much to do, so much to see, so what's wrong with taking the back streets? You'll never know if you don't go. You'll never shine if you don't glow.&lt;\/p>\n                                      &lt;\/td>\n                                &lt;\/tr>\n                          &lt;\/table>\n                    &lt;\/div>\n               &lt;!--[if (gte mso 9)|(IE)]>\n               &lt;\/td>\n               &lt;\/tr>\n               &lt;\/table>\n               &lt;![endif]-->\n          &lt;\/td>\n     &lt;\/tr><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_dea2bd93570bc9d9919d18a1f314195f\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>You don\u2019t need to worry about changing the widths in the conditional code, as that is solely for Outlook for desktop.<\/p>\n<h3>Which method to use?<\/h3>\n<p>Both of these methods work well now that mobile email clients support media queries.<\/p>\n<div style=\"background: #f6f6f6; border: 1px solid #ddd; padding: 15px; margin-bottom: 30px;\">\n<table style=\"border: 0; margin: 0;\" width=\"100%\">\n<thead>\n<tr>\n<th><\/th>\n<th><b>Media queries method<\/b><\/th>\n<th><b>Hybrid method<\/b><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"background: #f6f6f6; padding: 15px;\"><b>Pros<\/b><\/td>\n<td style=\"background: #ffffff; border: 1px solid #ddd; padding: 15px;\">\n<ul>\n<li aria-level=\"1\">Less code heavy<\/li>\n<li aria-level=\"1\">Content is read aloud in order by screen readers<\/li>\n<\/ul>\n<\/td>\n<td style=\"background: #ffffff; border: 1px solid #ddd; padding: 15px;\">\n<ul>\n<li aria-level=\"1\">Less susceptible to being messed with by changes and updates from email clients<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"background: #f6f6f6; padding: 15px;\"><b>Cons<\/b><\/td>\n<td style=\"background: #ffffff; border: 1px solid #ddd; padding: 15px;\">\n<ul>\n<li aria-level=\"1\">More susceptible to being messed with by changes and updates from email clients<\/li>\n<\/ul>\n<\/td>\n<td style=\"background: #ffffff; border: 1px solid #ddd; padding: 15px;\">\n<ul>\n<li aria-level=\"1\">More code heavy<\/li>\n<li aria-level=\"1\">Content is read out of order by screen readers<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>The media-query based method is less code heavy, and because you can put the classes on either column, you are able to leave the content in an order that makes sense to screen readers, while still displaying it in a way that makes sense visually.<\/p>\n<p>So if accessibility is a large concern, the media-query version is probably your best bet.<\/p>\n<p>However, if you\u2019re concerned about having a version that is more foolproof and less susceptible to the whims of email clients, the hybrid version is the way to go.<\/p>\n<h2 id=\"no-mobile-stacking\">When <i>not<\/i> to stack content on mobile<\/h2>\n<p>This isn\u2019t to say everything needs to be stacked on mobile. Don\u2019t go stack crazy. There are cases where things don\u2019t need to stack on mobile, like this email signature:<\/p>\n<figure id=\"attachment_37090\" aria-describedby=\"caption-attachment-37090\" style=\"width: 276px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"wp-image-37090 size-medium\" style=\"border: 1px solid #8994A1;\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/jaina-email-signature-276x300.png\" alt=\"jaina email signature\" width=\"276\" height=\"300\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/jaina-email-signature-276x300.png 276w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/jaina-email-signature.png 766w\" sizes=\"(max-width: 276px) 100vw, 276px\" \/><figcaption id=\"caption-attachment-37090\" class=\"wp-caption-text\"><em>Our signatures in many of our emails are two columns that don\u2019t stack on mobile.<\/em><\/figcaption><\/figure>\n<p>Or cases where you want to go from stacked on desktop to non-stacked on mobile.<\/p>\n<p>Our January 2021 newsletter had all our resolutions laid out with each section stacked on top of each other in three columns. When stacking these on mobile, we wanted to make better use of space. So, we had the images, names, and titles become \u201cun-stacked\u201d while each column became a new row:<\/p>\n<table style=\"margin-bottom: 30px;\">\n<tbody>\n<tr>\n<td><b>Desktop<\/b><\/td>\n<td><b>Mobile<\/b><\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><img decoding=\"async\" class=\"alignnone wp-image-37096 size-large\" style=\"border: 1px solid #8994A1;\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/desktop-litmus-live-email-1024x805.png\" alt=\"desktop litmus live email\" width=\"1024\" height=\"805\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/desktop-litmus-live-email-1024x805.png 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/desktop-litmus-live-email-300x236.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/desktop-litmus-live-email-768x604.png 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/desktop-litmus-live-email.png 1376w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/td>\n<td><img decoding=\"async\" class=\"alignnone wp-image-37089 size-large\" style=\"border: 1px solid #8994A1;\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/mobile-litmus-live-439x1024.png\" alt=\"mobile litmus live\" width=\"439\" height=\"1024\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/mobile-litmus-live-439x1024.png 439w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/mobile-litmus-live-129x300.png 129w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/mobile-litmus-live-658x1536.png 658w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/mobile-litmus-live.png 666w\" sizes=\"(max-width: 439px) 100vw, 439px\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>So as you can see, stacking everything isn\u2019t always the answer. Make sure you are making the best use of your space when designing for mobile. In some cases, that includes not stacking content.<\/p>\n<h3>Coding my interesting stack variation<\/h3>\n<p>I created the above effect by using modified versions of the hybrid stacking code. In this case, I started with a hybrid three column:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;tr>\n     &lt;td align=\"center\" valign=\"top\" style=\"font-size:0; padding-bottom: 60px;\">\n     &lt;!--[if (gte mso 9)|(IE)]>\n     &lt;table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" role=\"presentation\" style=\"width: 100%;\">\n     &lt;tr>\n     &lt;td valign=\"top\" style=\"width: 180px;\">\n     &lt;![endif]-->\n          &lt;div style=\"display:inline-block;\">\n               &lt;table class=\"wFull\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" role=\"presentation\" style=\"width: 180px;\">\n                     &lt;tr>\n                         &lt;td align=\"center\" valign=\"middle\">\n                              [--column 1 content  goes here--]\n                         &lt;\/td>\n                     &lt;\/tr>\n               &lt;\/table>\n          &lt;\/div>\n     &lt;!--[if (gte mso 9)|(IE)]>\n     &lt;\/td>&lt;td style=\"width: 30px;\">\n     &lt;\/td>&lt;td valign=\"top\" style=\"width: 180px;\">\n     &lt;![endif]-->\n          &lt;div style=\"display:inline-block;\">\n               &lt;table class=\"wFull\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" role=\"presentation\" style=\"width: 180px;\">\n                     &lt;tr>\n                         &lt;td align=\"center\" valign=\"middle\">\n                              [--column 2 content  goes here--]\n                         &lt;\/td>\n                     &lt;\/tr>\n               &lt;\/table>\n          &lt;\/div>\n     &lt;!--[if (gte mso 9)|(IE)]>\n     &lt;\/td>&lt;td style=\"width: 30px;\">\n     &lt;\/td>&lt;td valign=\"top\" style=\"width: 180px;\">\n     &lt;![endif]-->\n          &lt;div style=\"display:inline-block;\">\n               &lt;table class=\"wFull\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" role=\"presentation\" style=\"width: 180px;\">\n                     &lt;tr>\n                         &lt;td align=\"center\" valign=\"middle\">\n                              [--column 3 content  goes here--]\n                         &lt;\/td>\n                     &lt;\/tr>\n               &lt;\/table>\n          &lt;\/div>\n     &lt;!--[if (gte mso 9)|(IE)]>\n     &lt;\/td>\n     &lt;\/tr>\n     &lt;\/table>\n     &lt;![endif]-->\n     &lt;\/td>\n&lt;\/td><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_e97e535dc81d82e80c6c0a89c4ca2f85\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>Then, in each column, I added a row with two-column stacking and a second normal row for the quote. Since I didn\u2019t want the image and the name to be side by side on desktop, I left out the ghost column separator between the divs. And I set the tables in the divs to have max-widths that would result in the divs being inline on mobile. <\/p>\n<p>The columns themselves were set to 180px width, which is much smaller on mobile, so the divs stacked until those tables were set to 100% by a media query on mobile. So each column now looked like this: <\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">          &lt;div style=\"display:inline-block;\">\n               &lt;table class=\"wFull\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" role=\"presentation\" style=\"width: 180px;\">\n                    &lt;tr>\n                         &lt;td style=\"font-size:0; padding-top: 30px;\" align=\"center\" valign=\"middle\">\n                         &lt;!--[if (gte mso 9)|(IE)]>\n                         &lt;table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" role=\"presentation\" style=\"width: 100%;\">\n                         &lt;tr>\n                         &lt;td valign=\"top\" align=\"center\" style=\"width: 180px;\">\n                         &lt;![endif]-->\n                              &lt;div style=\"display:inline-block;vertical-align:middle;\">\n                                   &lt;table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" role=\"presentation\">\n                                             &lt;tr>\n                                                  &lt;td align=\"left\" valign=\"middle\">\n                                                       &lt;img src=\"https:\/\/via.placeholder\/79\" alt=\"\" width=\"79\" height=\"79\" >\n                                                  &lt;\/td>\n                                             &lt;\/tr>\n                                   &lt;\/table>\n                              &lt;\/div>\n                              &lt;div style=\"display:inline-block;vertical-align:middle;\">\n                                   &lt;table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" role=\"presentation\">\n                                             &lt;tr>\n                                                  &lt;td align=\"left\" valign=\"middle\">\n                                                       [-- content that stacks on desktop, but not on mobile goes here--]\n                                                  &lt;\/td>\n                                           &lt;\/tr>\n                                   &lt;\/table>\n                              &lt;\/div>\n                         &lt;!--[if (gte mso 9)|(IE)]>\n                         &lt;\/td>\n                         &lt;\/tr>\n                         &lt;\/table>\n                         &lt;![endif]-->\n                         &lt;\/td>\n               &lt;\/tr>\n               &lt;tr>\n                         &lt;td align=\"left\" valign=\"top\">\n                              [--content that stacks on both desktop and mobile goes here--]\n                         &lt;\/td>\n                    &lt;\/tr>\n               &lt;\/table>\n          &lt;\/div><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_df6e49ca40a654d0118ebd1e7ebdc79a\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>Then I set the tables to have max-width values that would result in them being situated next to each other on mobile. But on desktop, the containing cell was too small for them to be situated next to each other, resulting in the content stacking on desktop.<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">          &lt;div style=\"display:inline-block;\">\n               &lt;table class=\"wFull\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" role=\"presentation\" style=\"width: 180px;\">\n                    &lt;tr>\n                         &lt;td style=\"font-size:0; padding-top: 30px;\" align=\"center\" valign=\"middle\">\n                         &lt;!--[if (gte mso 9)|(IE)]>\n                         &lt;table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" role=\"presentation\" style=\"width: 100%;\">\n                         &lt;tr>\n                         &lt;td valign=\"top\" align=\"center\" style=\"width: 180px;\">\n                         &lt;![endif]-->\n                              &lt;div style=\"display:inline-block;vertical-align:middle;\">\n                                   &lt;table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" role=\"presentation\" style=\"width: 79px;\">\n                                             &lt;tr>\n                                                  &lt;td align=\"left\" valign=\"middle\">\n                                                       &lt;img src=\"https:\/\/via.placeholder\/79\" alt=\"\" width=\"79\" height=\"79\" >\n                                                  &lt;\/td>\n                                             &lt;\/tr>\n                                   &lt;\/table>\n                              &lt;\/div>\n                              &lt;div style=\"display:inline-block;vertical-align:middle;\">\n                                   &lt;table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" role=\"presentation\" style=\"max-width: 221px;\">\n                                             &lt;tr>\n                                                  &lt;td align=\"left\" valign=\"middle\">\n                                                       [-- content that stacks on desktop, but not on mobile goes here--]\n                                                  &lt;\/td>\n                                           &lt;\/tr>\n                                   &lt;\/table>\n                              &lt;\/div>\n                         &lt;!--[if (gte mso 9)|(IE)]>\n                         &lt;\/td>\n                         &lt;\/tr>\n                         &lt;\/table>\n                         &lt;![endif]-->\n                         &lt;\/td>\n               &lt;\/tr>\n               &lt;tr>\n                         &lt;td align=\"left\" valign=\"top\">\n                              [--content that stacks on both desktop and mobile goes here--]\n                         &lt;\/td>\n                    &lt;\/tr>\n               &lt;\/table>\n          &lt;\/div><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_52445155844747157af7b4c2f79c11ee\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><a rel=\"noopener\" href=\"https:\/\/litmus.com\/builder\/73fead2\" target=\"_blank\" rel=\"noopener\">See the code in action<\/a> for all the different versions of stacking\u2014including this one.<\/p>\n<h2>Final thoughts<\/h2>\n<p>As you can see, when you combine these different methods, you can come up with all kinds of interesting ways to stack and sort content. So ensure that your subscribers have the best viewing experience and make sure your designs stand out on mobile by stacking those columns for optimal readability (and remember to use <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts\" target=\"_blank\">web safe fonts<\/a>). Try it out and let us know what you come up with!<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Wondering how to get your HTML email content to stack on mobile devices? We\u2019ll show a few different ways\u2014with code you can copy and paste today!<\/p>\n","protected":false},"author":25,"featured_media":37085,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[478,102,179],"blog_category":[53],"class_list":["post-37084","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-design","tag-html","tag-responsive-email","blog_category-tips-resources"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Stack Columns in Responsive Emails - Litmus<\/title>\n<meta name=\"description\" content=\"Wondering how to get your HTML email content to stack on mobile devices? We\u2019ll show a few different ways\u2014with code you can copy and paste today!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/mobile-responsive-email-stacking\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Stack Columns in Responsive Emails\" \/>\n<meta property=\"og:description\" content=\"Wondering how to get your HTML email content to stack on mobile devices? We\u2019ll show a few different ways\u2014with code you can copy and paste today!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/mobile-responsive-email-stacking\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-04T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-24T14:31:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/How-to-stack-things-on-mobile.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1380\" \/>\n\t<meta property=\"og:image:height\" content=\"725\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Stack Columns in Responsive Emails - Litmus","description":"Wondering how to get your HTML email content to stack on mobile devices? We\u2019ll show a few different ways\u2014with code you can copy and paste today!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/mobile-responsive-email-stacking","og_locale":"en_US","og_type":"article","og_title":"How to Stack Columns in Responsive Emails","og_description":"Wondering how to get your HTML email content to stack on mobile devices? We\u2019ll show a few different ways\u2014with code you can copy and paste today!","og_url":"https:\/\/www.litmus.com\/blog\/mobile-responsive-email-stacking","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2021-10-04T14:00:00+00:00","article_modified_time":"2025-01-24T14:31:25+00:00","og_image":[{"width":1380,"height":725,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/How-to-stack-things-on-mobile.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/mobile-responsive-email-stacking#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/mobile-responsive-email-stacking"},"author":{"name":"","@id":""},"headline":"How to Stack Columns in Responsive Emails","datePublished":"2021-10-04T14:00:00+00:00","dateModified":"2025-01-24T14:31:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/mobile-responsive-email-stacking"},"wordCount":7,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/mobile-responsive-email-stacking#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/How-to-stack-things-on-mobile.png","keywords":["Design","HTML","Responsive Email"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/mobile-responsive-email-stacking#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/mobile-responsive-email-stacking","url":"https:\/\/www.litmus.com\/blog\/mobile-responsive-email-stacking","name":"How to Stack Columns in Responsive Emails - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/mobile-responsive-email-stacking#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/mobile-responsive-email-stacking#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/How-to-stack-things-on-mobile.png","datePublished":"2021-10-04T14:00:00+00:00","dateModified":"2025-01-24T14:31:25+00:00","description":"Wondering how to get your HTML email content to stack on mobile devices? We\u2019ll show a few different ways\u2014with code you can copy and paste today!","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/mobile-responsive-email-stacking#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/mobile-responsive-email-stacking"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/mobile-responsive-email-stacking#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/How-to-stack-things-on-mobile.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/10\/How-to-stack-things-on-mobile.png","width":1380,"height":725,"caption":"How-to-stack-things-on-mobile"},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/mobile-responsive-email-stacking#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"How to Stack Columns in Responsive Emails"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":""}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/37084","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=37084"}],"version-history":[{"count":2,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/37084\/revisions"}],"predecessor-version":[{"id":108334,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/37084\/revisions\/108334"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/37085"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=37084"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=37084"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=37084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}