Moving elements with JavaScript

Recently I had a situation where there were two elements, A and B, each of which contained a whole load of things. On mobile A was at the top and B was below it. But on desktop B was on the left and A was on the right. Theoretically that's easy to fix - flexbox will sort that right out. However, that then meant that the focus order was wrong. But that's still an easy fix - you just duplicate one of the elements in the HTML and hide one on mobile and the other on desktop. Except that this is in a CMS and the HTML was being built by it and didn't exist as HTML to change. And there were a load of scripts doing things inside these elements, some of which could well depend on a unique ID or a class only being used once. It was an important page on the site, so if I broke it, things would go very wrong, so I didn't want to touch it. There will one day be some CSS to tackle this: reading-flow . But at the moment it's only available in Chromium browsers and is also marked as experimental, ther