How columns display on mobile devices: using the "Do not stack on mobile" setting

Often content in an email is organized in multiple columns. When viewed on a mobile device, those columns can become quite narrow and lead to a sub-optimal reading experience. In order to guarantee a better experience while reading emails on mobile devices, BEE generates HTML code that makes columns stack vertically. This way content is reorganized in a way that makes zooming unnecessary and is easy to scroll with a finger.

Desktop vs Mobile Preview


Vertical stacking is supported by the most popular mobile email clients. In some cases, the desktop version will be displayed. That happens when a client lacks support for standard CSS. For any email client compatibility, please see the email client support section.

One Size Doesn't Fit All

Although it normally helps, there are cases in which vertical stacking of columns may not lead to an optimal result.

A common scenario is using a row to display a navigation bar with text links or icons. In that scenario, as shown below, a vertical layout could create excessive empty space, hiding important elements of the message or giving too much visibility at the top of the email to content that is not supposed to be that prominent.

A navigation bar: vertical stacking vs. horizontal display


An example with illustrations


Changing the Default Behavior

With the introduction of the Do not stack on mobile row setting, users of the BEE editor can decide when to override the default behavior. They can also prevent columns from stacking vertically on mobile devices.


The option is available in the right pane as a row property, off by default.


Activating the feature (BEE Plugin only)

If you are a BEE Plugin user, please note that this feature shipped in an OFF state by default and therefore users of the BEE editor in your application will not see it until you enable it.

You can enable the feature with one click in the server-side configurations for your BEE Plugin application within the BEE Plugin admin panel.

"Do not stack" and Email Design Best Practices

Email design best practices suggest a careful use of this display setting. A user-friendly vertical layout on mobile makes sense in most cases. As always, it is up to you and your creativity when and how to use this option.

Have fun with this feature! 🙂

Have more questions? Submit a request


  • Avatar

    Thanks! This is a great addition.

  • Avatar
    Tyler Miller

    Thanks—our team's been dying for this!

  • Avatar
    Joy Marcellus

    Is there a way to have an image I have used on the right side in a row to appear before the left side item when viewed on mobile?
    i.e. A B

  • Avatar
    Tyler Miller

    ^Our team would also love a feature to assign the order in which multi-column structures stack on mobile.

  • Avatar
    Gus Ferguson

    ^^^^ I'd like information on this too please Beepro!

  • Avatar
    Guillermo Padilla

    Hi ALL, stack order is not available yet, but it's on our list (it's a big list, but this one has a lot of votes 😉).
    Just waiting to finish some important developments to start adding it.

  • Avatar
    Zoltán Kerekes


    I have a solution, but a little hack in the exported html is required to work.

    So, in the editor you have to make both of version (A B and B A) and after exporting newsletter you have to add classes or ids to the containers of these versions in the html file(i.e .hideOnMobile and .hideOnDesktop), then the css below into tags:

    @media (max-width: 720px) {
    display: none;

    @media (min-width: 725px) {
    display: none;

    It worked for me.

  • Avatar
    Nick Vo Trung

    Is there any way I can set "Do not stack on mobile" enable by default?

  • Avatar
    Matteo Mazzolari

    Hi Nick, you can create a template with the toggle enabled. At the moment, is not possible to fix it by default.