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(); });
<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>
#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; } }