Question

I am building a responsive website, and for good user experience, I need some layout changes from mobile to desktop. Specifically, I need to switch the order of some HTML elements.

I need HTML elements be in a different order for desktop vs mobile.

Mobile

<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>

Order switched for Desktop

<div class="one">One</div>
<div class="three">Three</div>
<div class="two">Two</div>

This is simplified version of what I want to accomplish. I think it’s called progressive enhancement. How do web design experts move html elements around? With JavaScript? Would it be normal? Are there any jQuery plugins?

Answer 1

Just use jQuery to change the DOM around as required

if (mobile == true) {

    $('div.three').insertBefore($('div.two'));
}