Target an DnD section with CSS. Element stacking order on mobile.

Develop, Build & Integrate CMS Development
, ,
4

I have encountered this problem probably 30 times since I wrote this post. Here is how I solved it…

I made a module called “Mobile Swap” and placed it within any of the multi column layouts I want to see swapped in order on mobile when they stack. The module had this as the HTML:

<mobile-swap></mobile-swap>

In the theme’s javascript, I added this jQuery snippet (you need jQuery):

$('mobile-swap').each(function() {
 var $dndSection = $(this).closest('div.dnd-section.row-fluid-wrapper');

 if ($dndSection.length > 0) {
 $dndSection.children('div.row-fluid').addClass('mobile-reverse');
 }
});

This essentially detects where the module is, traverses up the DOM to the section container and adds a class to the row directly beneath it that contains the columns.

Depending on your mobile breakpoint for when elements stack, I added this CSS:

 all and (max-width:1080px) {
 .dnd-section .row-fluid.mobile-reverse {
 flex-flow: column-reverse;
 }
}

This will stack the columns and re-order them from last to first. In most cases, it’s a 50/50 column where the text is on the left, the image is on the right, and you need them to flip on mobile so the image is up top and the text is below.

This gives content editors the ability to add this wherever they are making content and determine when/where they would like it to happen.

Hope this helps!