I have similar case as on image, where panel elements on the mobile should have different order.
How to achieve that?
I use columns which become rows on mobile, but order is wrong and not user friendly, as on mobile title should be first not second, but on desktop it should be centered between buttons.
PS: instead of button there can be group of buttons or other controls.
O I tried, so the problem is that this option works but not for this case…
if I group title with any of buttons then I cannot display 2 buttons in a row
If you want an easy way out, I’d just duplicate one of the elements and conditionally hide/show it. This would be the easy way. The harder way would be to figure this out, really depends on you Let me know, I can think about this if the “easy way” doesn’t suit you.
I made it work, it would take some time to reproduce on video.
I can give you some hints though.
You need to add an ID e.g. #yourID to the div (containing the title) between buttons.
You need to make your CSS scoped to the element that :has() the element with the id, you can do this by doing
<style>
@media (min-width: 768px) and (max-width: 1024px) {
div:has(#yourID) {
order: 0 !important;
/*I'm not sure whether you need the !important - try also without if possible*/
}
}
</style>
You can inline the style tag in an html element in the page to make it work in the editor, weweb is already injecting it for you in the page. !important is needed because weweb inlines the order in the style of the element itself and it has precedence over your rule without it.