Changing position in a group on condition

Hi Bubblers,

I have a question to ask, I am creating a static Ui and in that I have a group which contains two groups having 50% each width. Now when the screen size is less than 768, I added a condition to give them both 100% width, now of course the group on the left comes first and latter the right one. Is there any way that I could make the right group appear first in page and then the left on condition?

I may be missing out on something but if I remember correctly, there is no way to change the element’s position via conditions.

image

What we did back then was to simply create 2 identical groups and showing or hiding them based on conditionals which in your case, is through page widths. This, by all means, is unoptimized since you’d be creating more elements hence increasing the size app’s and increase page load but you gotta do what you gotta do :man_shrugging:

Unless, of course, there is another way to go about it

I guess gonna have to be do something like this. Thanks for the help

If you’re familiar with CSS, you could add a custom HTML element hidden somewhere and through this in:

#left-side-left-order{
order: 1 !important;
}
#left-side-right-order{
order: 2 !important;
}
#right-side-left-order{
order: 1 !important;
}
#right-side-right-order{
order: 2 !important;
}

Then conditionalize the elements HTML ID.

Here is the outcome:

4 Likes

Wow, this is good stuff!!! Thanks for sharing @draked123

1 Like

Thanks @draked123 for this, this is really helpful.

This topic was automatically closed after 70 days. New replies are no longer allowed.