Why does the iPhone not draw my page correctly on load using intention.js

Question

Why does the iPhone not draw the page correctly on load

I'm using intention.js to reorder the content on a page for different viewport widths. However when I load the page on an iPhone it displays the in_base / in_standard layout or the content order that is meant for the desktop viewport. If I rotate the iPhone the in_phone layout or mobile view is displayed. On an android device the page renders correctly ie the second image. Also the page displays correctly in chrome dev tools emulating an iPhone.

This is on load.

After the iPhone has been rotated.

Answer 1

It turns out that I need to add intention.js to the bottom of the document.