How to add dynamic css class and/or the flex order?

Hey,

Im trying to implement a simple UI experience for the client where they have a templated landing page structure they can reuse. Lets say there is 10 different sections, named section 1 to section 10.

What we would like to achieve:
We would like to set up a CMS solution where the content is done from the CMS/Editor so the client never has to enter the designer and potentially break stuff. So far so good.

The issue comes when we would like to give the client the ability to re-order the sections on a per page basis. It could be pretty easy if the option of filling the “Flex Order” field from CMS data was possible but I dont see that being possible as of now.

It could also be done if we could add a custom class to elements using the CMS. Which I also dont find any solution on how to do.

Lets say the template is setup in an order of 1-10. But we would like to move the following sections:

  • Section 3 to position 5.
  • Section 8 to position 3.

We could also potentially just set 10 placements for the different sections, where we use dynamic visibility to achieve the same result, but that would get really messy for the editing experience.

So the question is, if anyone has a workaround or if Im just not blind/stupid?