DnD Sections: Column Stacking Order

rossatgrowth
Contributor | Platinum Partner

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!

0 Upvotes
6 Replies 6
dennisedson
Community Manager

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

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
erod
Contributor

Hi @rossatgrowth , 

 

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

 

Cheers, 

Edgar

dbeau79
Contributor | Diamond Partner

@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.

rossatgrowth
Contributor | Platinum Partner

@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.

0 Upvotes
webdew
Top Contributor | Diamond Partner

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.

0 Upvotes
rossatgrowth
Contributor | Platinum Partner

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)