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.
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.
Dave Roma, HubSpot CMS Developer
Build a revenue generating website on HubSpot without a developer using The Generator Theme
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)
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.
@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.