This problem is not really solvable, due to how floating works (the top is pinned to where you place the floating element). Ergo, if you put the infobox after the lead, it will float below the lead instead of next to the lead. "Infoboxes are floated to the top right" is therefor incorrect assessment. Float has no concept of the 'top' of other content, it only knows it's own top.
I think the best is to move them in post processing, if need be using assistance of an additional marker tag to indicate potential valid document positions:<infobox-position/>. Javascript can be used to dynamically move/clone the section between eligible positions, if/when the viewport dimensions are changed.
This is a limitation you cannot fix with responsive CSS, because you want to change the order of HTML structure, in a space where such structure cannot be provided (multiple unannotated <p> siblings). At most with parsoid sections and maybe CSS grid, you could achieve something like this, but that seems too far fetched to me at this time.