Hi all,

I'm encountering an issue with responsive classes.
This is what I did.

On a desktop, I would like to have a short text in 'sidebar-left' and a contact form in 'sidebar-right'.
On mobile phones and tablets, I would like to have this same contact form in 'sidebar-left' and this same text in 'sidebar-right'. So just the other way around.

I duplicated both the contact form module and the module with the text.
In the Base outline > Layout, I added a 'sidebar-left-mobile' and a 'sidebar-right-mobile' module position [see the screenshot].

I assigned the duplicated modules to the mobile module positions;
and in the Block tabs I added the CSS-classes 'hidden-desktop' in the positions that should appear on mobile devices | and added 'visible-desktop' in the positions that should appear on desktop.

But, after having done this, all four modules (so 2 times the text and two times the contact form appear on desktop), like the CSS-classes don't have any impact. I also tried visible-phone and visible-tablet instead of hidden-desktop, but this doesn't help.

A week ago, but I don;t remember exactly what was the case, it already seemed like the CSS-classes in the Block-tab in the Layout manager weren't working - in that case I added a module class suffix in the module itself (which worked).
But, in this case, the modules already have a suffix, like 'title-border', and I don't know if I can add two? (and, in the documentation, I read that it is preferred to add classes in the layout manager instead of in the module class suffix field in the module itself.

Have a nice day,
thanks in advance for some help,
Stefan