Change elements order for desktop vs mobile

[Anna.fae]

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.

[raelyn]

Hey Anna! Maybe you can try the “reverse” function in the editor for the mobile view.

[Broberto]

I’d go for something like

[Div]
—[Div Wrapper]
----- [Button]
----- [Title]
—[Button]

On mobile I’d do on [Div Wrapper] Reverse: ON as @raelyn mentioned and direction vertical. Or horizontal and wrap elements ON

[Anna.fae]

Thank you both, that’s exactly what I need. I can re-group items and then set reverse order for group and subgroup.

[Anna.fae]

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

h

[Broberto]

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.

[Anna.fae]

there is simple way to do it with Flex order (as we have flexbox elements)
But it does’t work for me in weweb when I add to css:(((

[Broberto]

Yeah, I just was about to propose this to you. I’ll get back to you asap.

[Broberto]

I made it work, it would take some time to reproduce on video.
I can give you some hints though.

1. You need to add an ID e.g. #yourID to the div (containing the title) between buttons.
2. 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>

3. You need to put this into the custom code section of your page/site, this won’t show in the editor though, so you need to add this CSS to the editor via passing the CSS code through https://weweb-embed.statechange.ai/ and embed it to your site, they have a video on how to do this.

4. Publish and refresh the entire page not just the editor (not with the arrows)

5. Should work

If you need any assistance, I’m down for a Google Meet, but I’m not sure when as I’m very busy. But I can make time.

[dorilama]

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.

[Broberto]

I think I tried this and it might not have worked, nor scripts or something similar, but you can try this way too @Anna.fae

[dorilama]

scripts are handled differently by the html component