DnD Sections: Column Stacking Order

[rossatgrowth]

Hello all,

Building out my first featured DnD theme for a client and loving the flexibility it offers the end-user. One issue I've run into is how to reverse/adjust the stacking order of columns for mobile in specified sections. My thought was to apply a "reverse" class to a section and add a "flex-direction: reverse;" rule for the containing section, but it appears classes can only be applied to DnD areas as far as I can tell?

Another idea was to add the option inside the module to make it the last item in a row by adding "order: 2" rule but ran into nesting issues with the automatic wrapping HS applies to modules.

Any insight is much appreciated. Thanks guys!

[daveroma]

The suggestion by @dbeau79 about creating a custom module with a boolean to "reverse the columns" is technically the best practice at the time of this writing (maybe hubspot implements native column reverse one day)

If you dont have dev resources, a more immediate and manageable workaround would be to clone the section, reverse the columns, and then set the section's Visibility to hide on desktop and show on mobile using the editor. 

[rossatgrowth]

Hi @webdew, thanks for your response.  I'm hoping to find a solution that doesn't involve building out a full row as a module which seems more of a "clunky" UX approach. However, if this is the only way I've started building out a module with boolean options to flip on both the x and y-axis but opens up new issues for a separate topic post (namely style fields)

[webdew]

Hi @rossatgrowth ,

I got this problem fixed by bottom code, use refrence class and add in mobile media.

@media (max-width:767px){

.add_refrence_class{
flex-direction: column-reverse
}

}

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regard.

[rossatgrowth]

@erod and @dbeau79

Thanks for your replies.

Using "flex-direction: column-reverse;" did occur to me as well as a "reverse column order" boolean—the limitation I'm seeing here is that I would need to develop a 2-column module in order to have control over the container childrens' orders.

The way I currently have the modules built out, copy w/ optional header is one custom module and an image with other options is the other custom module. I was hoping there was some way, even a trick for the rich text module to always go last in the parent container.

If building a 2-column "text/image" module with options for desktop/mobile order is the only viable solution that's OK too, I was curious if there was a more streamlined approach anyone has used to tackle this.

[dbeau79]

@rossatgrowth I think a section like this would be a good candidate for a custom module where you could add the css via a boolean (see @erod 's response).  So let's say it's a two column layout with an image on the left and copy on the right.  You could build that out in a custom module and add a boolean to "reverse the columns" which would add a class to the container that does just that but on desktop only.  That way you could have a staggered effect if you have a few of these modules stacked on top of eachother but when you get to mobile they will all have a consistent layout of image on top of copy (or vice versa).  This would also be a lot easier for your end user to maintain.  If that's not what you had in mind let me know.  Happy to throw out other suggestions.

[erod]

Hi @rossatgrowth , 

Have you tried applying "Display: flex;" and "flex-direction: column-reverse;"? It worked on my end. 

Cheers, 

Edgar

[dennisedson]

@dbeau79 , I have a feeling you have some ideas on how to do this 😃