Weighted or relative order of flexbox items

As I understand it, the order of the flexbox css properties is absolute, i.e. the last item in the flex container is order: 0

hoisted up.

I would like to be able to promote certain elements in a flex container so that they are not hoisted to the desired location, but instead multiple elements, for example. move the element above the previous one.

To clarify:

<div>A</div>
<div>B</div>
<div>C</div>
<div style="order: -1">This should go up by one, between B and C</div>

      

        
        
        
      

    

This style will of course move the last element to the top and not where I want it to.

Is there a way to achieve this with just css?

Apparently I'm asking the impossible. Since I will probably need an ordering like this at some point, I will just need to create an ordering system in javascript that changes the ordering property of the children on the fly. I understand this somehow, but not clear enough to insert words right now.

I think it's worth mentioning that this is for a layout editor that will export simple html and css. Javascript will only be used in the editor, not on the published site. Otherwise it would be enough to simply reorder the actual items, but at some points some items must be prioritized for different devices.

I will eventually answer this question with the method I came up with, but in the meantime feel free to add your own suggestions and grab the dots for the accepted answer :)