Hot Graphic block position not retained when returning to desktop view

[swashbuck]

Subject of the issue

When using the _isNarrativeOnMobile option, the Hot Graphic component will change to a Narrative component on mobile. The problem is that the new Narrative component is always added to the end of the block's contents in the DOM order. This breaks the intended order of any components in the same block.

I believe this is because the Narrative/Hot Graphic is always appended to the block without regard for the original order:

adapt-contrib-hotgraphic/js/hotgraphicView.js

Line 44 in a4b949e

$container.append(newNarrative.$el);

The Narrative's replaceWithHotgraphic() also has the same behavior where the component is appended to the end of the block.

Your environment

• Hot Graphic 6.7.6
• Narrative 7.4.9

Steps to reproduce

1. Add a Hot Graphic component to a block using 'left' for _layout
2. Add a Graphic (or other) component to the same block using 'right' for _layout
3. Use _isNarrativeOnMobile: true on the Hot Graphic
4. View on mobile and notice the Graphic component's position
5. Then, view on desktop and notice the Graphic component's position

Expected behaviour

The Graphic component should be below the Hot Graphic on mobile and to the right on desktop.

Actual behaviour

It is not so.

Screenshots

Before switching to Mobile

After switching to Desktop from Mobile