Reorder form components based on screen size.
Basically, I have 2 form sections: a main section, and a config section. On screen sizes of
lg
or larger I'd like the config section to be to the right of the main section, but on mobile screens I want the config section to stack on top of the main section.
Because the display for a form is grid
, I can't add an extra attribute of flex-row-reverse
. And filament (to my knowledge) doesn't allow me to add classes or inline styles to the direct child elements of this grid. Otherwise the solution would be a simple order-first
and order-last
.
I also attempted using the ->columnStart()
method, but that didn't reorder the sections, it simply created a weird offset on desktop.
Is there any non-hackish way to solve this issue?1 Reply
The is my current working solution, but I don't like it.
![No description](https://cdn.answeroverflow.com/1263860756034621441/image.png)