The approach in MobileFrontend looks for a paragraph and an infobox (where infobox now includes block images since T258201), and switches them around. This approach requires us to list the likely types of block elements that could come before a paragraph, and our current filter of class=infobox|thumb is not exhaustive. Many images are wrapped in various containers (T261993) and there are other types of block elements we would want to move down.
The approach in mobile apps[1][2] just moves the lead paragraph (and all siblings up to the next paragraph) to the top of the page, regardless of what is above it. It then only has to detect templates at the top of the page which should stay at the top, currently this is just class=hatnote. For MF we should probably also include class=mbox and others we are aware of (mboxes are just hidden in mobile apps, hence not included in their code).
1. https://github.com/wikimedia/mobileapps/blob/e858d09962aa9c0e9a0b04bdbed36c18f973aeb5/lib/mobile/MobileHTML.js
2. https://github.com/wikimedia/mobileapps/blob/43c2b2f66641ebf58a0cc1ebf885e361f0ea68f0/pagelib/src/transform/LeadIntroductionTransform.js