- This topic has 5 replies, 2 voices, and was last updated 6 years, 8 months ago by
.
Hi,
is it possible to change the order of the columns, when they get stacked on mobile devices. (Like bootstrap’s push and pull classes)
Example:
The row on a desktop sized screen
( —1—) (—2—)
On mobile devices: –> Stacked, but the second column should be on the upper side of the stack.
(—2—)
(—1—)So is there a possibility to do that?
Hoping for your help.
Regards
Peter
Hi @Peter,
I hope you are well today and thank you for your question.
We can achieve this by developing custom CSS code but for that you have to displays columns in the order ( —2—) (—1—) on desktop then using CSS code we can change its order to ( —1—) (—2—)
Please do this and share me the page URL from your site where it is displaying so that i can help you.
Best regards,
Shufflehound teamHi,
thank you for your answer & here I’m sending the url.
1. The three rows under the slider should be stacked as required.
(—Text—-)(-Pic)
(-Pic-)(—Text—)
(—Text—-)(-Pic)
On mobile devices they should be stacked like that:
(—Text—-)
(— Pic —-)
2. The section “LEISTUNGEN” with it’s rows should also be stacked like described above.
Thank you for your help!
Regards
Peter
As said above to achieve this first make the elements in the row display in the following order.
(—Text—-)(-Pic)
(—Text—-)(-Pic)
(—Text—-)(-Pic)
Then i can help you to display it in below order on desktop.
(—Text—-)(-Pic)
(-Pic-)(—Text—)
(—Text—-)(-Pic)
Hi,
sorry I misunderstood that, but now I have changed the order of the columns as required.
Looking forward to your help!
You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
@media (min-width: 800px){ .sh-section-3ddcea5d5d3089a949180375fe30e126 .sh-column-211ae124ede2926a6896789f5c62af73 { float: left; } .sh-section-3ddcea5d5d3089a949180375fe30e126 .sh-column-0f55ac5e629cb3cd377e7b292e56ba88 { float: right; } }
