I am looking to rearrange the order of some items on my page using JS or CSS. The project I am working on is written with ReactJS. Here is the basic structure:
<div class="parent">
<form>
<div class="header"></div>
<button type="submit" class="B"></button>
</form>
<checkbox class="A"></checkbox>
</div>
What I want to achieve is to move A between the header and B elements.
It's not possible to use flexbox since the items do not share the same parents. Using the appendChild function would have the same effect as placing the A element directly before B.
To be more precise, this checkbox is affecting my validation because I utilize WithValidationRules in React, so I need to place it outside that wrapper.
Are there any other methods to relocate this element? I would prefer a solution using CSS.
Thank you!