Relocating Columns

[Oguzhan]

Hi,

I am currently working on optimizing my site for mobile devices. Some parts of my site are quite difficult to optimize. One of them being my sound-preview tables in which I am trying to reposition columns within a row.

On desktop devices the columns within a row are aligned like this:

| 1/6 | + | 1/4 | + | 1/4 | + | 1/6 |

That’s how they are supposed to be aligned.
When I switch over to a mobile device though the columns are aligned like this:

| 1/6 |
+
| 1/4 |
+
| 1/4 |
+
| 1/6 |

My goal is to have them aligned like this when I switch to mobile:

| 1/6 | + | 1/4 |
| 1/4 | + | 1/6 |

Is it possible to achieve this with some simple CSS?

Thanks a lot in advance!

[Prasant]

Hello @StiickzZ,

Thanks for asking.

I won’t recommend you to change the layout using CSS as it might create conflicts. Instead I would suggest you to have the same layout as you are looking for and display them only on mobile devices using Hide During Breakpoints feature under Customize > Setup. Here is a screencast to help you get started. Also to learn more about Hide During Breakpoints, please take a look at following tutorial.

Hide During Breakpoint - Explained

Thanks.