Visually Reorder (reverse) grid row columns on desktop
janwidmer opened this issue · comments
When using the Grid row as Container to display multiple Text-Image Combinations, its nice to have some variety for desktop screens and start with the image for the first grid row, start with the text for the second one and so on..
On mobile though, where everything is displayed as 100% width, its rather nice to always have the same order 1. Image 2. Text.
To achieve that, an Option to visually reverse the order of elements on desktop would be nice.
As a workaround, I could do it via Custom Class on the grid-row but it seems, those are currently not implemented, as they do not render..
Would you consider to add such an option?
The best implementation of this would be to add order sliders from 0 to 12 for each breakpoint, and then using order-x classes https://getbootstrap.com/docs/4.1/utilities/flex/#order
@janwidmer: the custom classes don't render in editor, because they are inside wrappers
@R33D3M33R good to know.. having and order slider would be nice, but it would also blow up the options meta box quite a bit..
I'm working on a project where i stumble about a similar problem. In my case i only needed the reverse order for smaller than medium breakpoints.
https://gist.github.com/gocsp/c7b303b3bc09dd022d5cfa32f44b43c3
The only thing it will do is add those classes to the row: flex-column-reverse flex-md-row
It would be possible to extend this with a select control to change the breakpoint.