Reversing elements in colour section on mobile

Here is a screenshot of the element.
Its a colour section with an array of code blocks and text blocks within 1/4 page block elements

Found the row setup – works but jumps from desktop to mobile view – 4 block row to single – bypassing tablet 2 block rows…

1 2 3 4
5 6 7 8
9 10 11 12

No table view 2 block rows.

And on mobile:
4
3
2
1
8
7
6
5
12
11
10
9

• This reply was modified 1 year, 10 months ago by mattwalt.

Yes – on the smaller option I get 2 blocks but they are flowing normally not reversing.

Surely something like this would be more elegant solution i approach for my situation? Though struggling to get it to work :-)

@media only screen and (max-width: 989px) {
.flip-mobile .flex_column_table {
display:flex !important;
flex-direction:column-reverse;
}
.flip-mobile .flex_column_table .flex_column {
flex:0 0 auto;
}
}
Using ID .flip-mobile

Hi
You can see he issue almost on every page.
Did the reversing only to 1 page (and a test page)
Shouldn’t require authentication to view… Site has a licence key but for some reason isn’t being accepted.
Thanks Matt

Created a user account

Yup found the toggle. It works great for smaller screens…
But as mentioned after – the issue is that for this site on sizes between 990 and 690 either get non reversed 2 block rows or a massive block image…
Need to ideally get a 2 row column which is also reversing.

One suggestion was to set different view for different devices – but having to deal with 100’s of rows on the site that its probably an impractical approach.
Is there not a way to use the colour block element to do the column reversal?

Thanks

Hi
Yes I see the toggle works – and allows for 2 break points.
There are 2 issues.

Firstly the break points – when setting at the narrower I get a brief area where I get a double column (which I need) but that double column is not reversing. When set to the wider break point works – However the image of the code block displays huge on table/mobile landscape (actually cuts off 1/2 – 1/3 of the image which isn’t ideal.

Secondly there are like 173 pages with 7-8 rows each… So doing a more per/page based solution would be the least work.

I tried the CSS approach but for some reason it doesn’t seem to work…

Please help.

Thanks M

Correct
Being Arabic text the info needs to run from right to left.
So on Desktop runs correctly
If I reverse the rows then is also works correctly on mobile.
So on Mobile runs correctly.
The issue is I really do need it reversed which seems to be the issue at the moment – this runs to the same order as on desktop.
So the correct order should run:
desktop is correct with (top row only):
ZIQ YAQ KIN YAK
tablet with two rows is correct with (top row only): The 2 left hand columns should display above the right hand.
KIN YAK
ZIQ YAQ
and mobile with one row should be
YAK
KIN
YAQ
ZIQ
As mentioned there are like 135 odd pages each with 7-8 rows to reverse so doing by page/element rather than by row would be ideal – but if it has to be by row – then I have no choice :-)

Failing being able to reverse the rows on tablet – I could then go direct to the below 990px wide option – but then would need to set a max size for the blocks so they don’t display massive on tablet view – say max 400px or something… The images are saved out at 700px. Hoping this doesn’t mean adding code to the individual blocks ;-)
Thanks M