Swap columns order on mobile device

Support
#1

Hi,
I would ike to swap the orders of my columns on a mobile device.

My rows are organized as this on a desktop :

  1. TEXT - 2) IMAGE
  2. IMAGE - 4) TEXT
  3. TEXT - 6) IMAGE
  4. IMAGE - 8) TEXT

And I would like to display it as this on a mobile device (once the columns have collapsed) :

1
2
4
3
5
6
8
7

But right now, t
hey are displayed like this :

1
2
3
4
5
6
7
8

Thank you for your help!

#2

Hello @ProductionMD1986,

Thanks for reaching out. :slight_smile:

You will have to use media queries so that the changes are limited to mobile devices. After that I suggest you to take a look at following tutorial to change the position.

Here’s a sample Codepen snippet that you can take a look. https://codepen.io/ESchuderer/pen/LNqJeW

Thanks.

#3

How about this link :

I’ve been trying the “marginless coumuns” solution, but it doesn’t work.

Any tips? Thanks again.

#4

Hi @ProductionMD1986,

There are several options that you can take to do this. One would be through custom CSS and making use of CSS Flex as what was suggested by @Prasant previously.

Is there a chance that you can provide us with the URL of the page you are working on so that we can check it?

Thank you.

#5

Of course, here is the url :

#6

Hi @ProductionMD1986,

You need to create ROWS that will be visible only in mobile. These rows should have opposite order as you have in desktop.

For example

Row 1 – 1) TEXT - 2) IMAGE

Row 2 – 3) IMAGE - 4) TEXT (for desktop)
Row 3 – 5) TEXT - 6) IMAGE (for mobile)

Row 4 – 7) TEXT - 8) IMAGE (for desktop)
Row 5 – 9) IMAGE - 10) TEXT (for mobile)

Row 6 – 11) IMAGE - 12) TEXT (for desktop)
Row 7 – 13) TEXT - 14) IMAGE (for mobile)

This way, the order will be

Desktop

  1. TEXT - 2) IMAGE
  2. IMAGE - 4) TEXT
  3. TEXT - 8) IMAGE
  4. IMAGE - 12) TEXT

Mobile

1 - TEXT
2 - IMAGE
5 - TEXT
6 - IMAGE
9 - TEXT
10 - IMAGE
13 - TEXT
14 - IMAGE

You can use this classes to make your rows visible only in desktop or visible only in mobile.

x-hide-xl = 1200px and up
x-hide-lg = 980px – 1199px
x-hide-md= 768px – 979px**
x-hide-sm = 481px – 767px
x-hide-xs = 480px & Smaller

To hide a row in mobile, you can add the following classes

Hope this helps

#7

Yes!!!
That’s exactly what I was looking for. Thank you so much !

#8

You’re welcome!
We’re glad @Paul.r were able to help you out.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.