Switch the order of two columns in mobile view

(0) Share

Report

Posted on by Toms Audrins

Hi,

We have an email with three sections. Each section has a column.

For desktop, it makes sense. In mobile, we need to swap the middle two columns so stacked version is red, green, red, green, red, green.

I have tried so far adding a class, with media tags, visibility: collapse, and it works for the designer view, but not once you send the email.

When sending the email, it seems that the style is not even included in the email, and I can not use inline style with media tag.

Happy to reward 10 USD for a solution that solves the problem, and 30 USD for a solution that is scalable (users can easily add these blocks in the future without opening HTML tab.

All responses (1)

Answers (0)

Suggested answer

Jelena Rajkovic on at

Like (0)

Report

RE: Switch the order of two columns in mobile view

Hello.

Currently we are developing a new feature to show and hide section for mobile and/or desktop, which should be available next year.

Until then, here is a code suggestion using one column section with two tables and right alignment:


    
    
    My Email Subject
    
    
    
    
    
    
    
    
    
    
    



        
            
                
                    
                        
                            
                                
                                    
                                        
                                            
                                                
                                                    
                                                        
                                                            
                                                                column1
                                                            
                                                        
                                                    
                                                
                                            
                                        
                                        
                                            
                                                
                                                    
                                                        
                                                            
                                                                column2
                                                            
                                                        
                                                    
                                                
                                            
                                        
                                    
                                
                            
                        
                    
                
            
        
        
            
                
                    
                        
                            
                                
                                    
                                        
                                            
                                                
                                                    
                                                        
                                                            
                                                                
                                                                    
                                                                        

                                                                            column2
                                                                        
                                                                    
                                                                
                                                            
                                                            
                                                                
                                                                    
                                                                        
                                                                            column1
                                                                        
                                                                    
                                                                
                                                            
                                                        
                                                    
                                                
                                            
                                        
                                    
                                
                            
                        
                    
                
            
        
        
            
                
                    
                        
                            
                                
                                    
                                        
                                            
                                                
                                                    
                                                        
                                                            
                                                                column1
                                                            
                                                        
                                                    
                                                
                                            
                                        
                                        
                                            
                                                
                                                    
                                                        
                                                            
                                                                column2

The solution has additional padding styles added for mobile, because in Outlook 50% and 50% with for tables creates issue, but setting 49% and adding the 6px as left padding will align the content on Outlook. And just setting it back to 0 and inner to 10px will make them equal on mobile.

You can save the HTML as template and reuse it or save the section as Content block and add it to other emails. Just make sure you copy media query style to those emails also.

But, the best would be to wait for the implementation of the new feature.

Hope this helps.