JSFiddle - React, Tailwind, and code Playground

HTML

<div id="this_is_iphone_only">
    Hello mobile device! (IRL this is just an empty div at the bottom of the page)
</div>
<div id="move_me_on_an_iphone">
    I should be at the top on the desktop
    and on the bottom on an iphone
</div>
<div id="main">
    <a id="show">Sim iPhone</a> | <a id="flip">Sim onload</a>
</div>

CSS

#this_is_iphone_only {
    display: none;
}
@media only screen and (max-device-width: 480px), 
    only screen and (min-device-width: 640px) 
               and (max-device-width: 1136px) 
               and (-webkit-min-device-pixel-ratio: 2) {
    #this_is_iphone_only {
        display: block;
    }
    /* this part isn't simulated in the fiddle */
    #move_me_on_an_iphone {
        display: none;
    }
}

JavaScript

function move_foo() {
    // IRL this is just in the page load handler
    if ($("#this_is_iphone_only").is(":visible")) {
        $("#main").after($("#move_me_on_an_iphone").detach().show());
    }
}


// these are just helpers to see all the action on the desktop
$("#show").click(function() {
    $("#this_is_iphone_only").show();
});

$("#flip").click(function() {   
    move_foo();
});