Change order of elements with CSS if the elements does not have the same direct parent

Question

I need to reorder some items on my page using JS or CSS. My project is written with ReactJS. Basically the structure is:

<div class="parent">
 <form>
  <div class="header"></div>

  <button type="submit" class="B"></button>
 </form>
 
 <checkbox class="A"></checkbox>
</div>

So what I need to do is to change A position and move it between header and B elements.

Can't use flexbox because the items does not inherit the same parents. Can't use appendChild function to inject there because will have the same behavior as directly putting the A element before B.

To be more specific, this checkbox is affecting my validation because I use WithValidationRules in React so I need to put it outside this wrapper.

There are some other ways to move this element? I prefer using CSS.

Thank you!

Answer 1

On first sight i would recommend not using a library that restricts you like this. Are you sure you have configured your validation correctly, so that you can have A before B.

If there is absolutely no way, you could make place a gap or a margin between header an B and add translateY("The height you need to move it up") to A.

If A is relative to parent then calc(100% + height of B) should work. Any padding, margin and gap on form must be calculated with.

Let me know if you have problems with this approach