Switching order of HTML elements when layout changes in Responsive Web Design

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

Resurrecting this question because i came across it via google, and the existing answers are outdated. The solution i ended up using was the only one with the downvote, so i'll elaborate on it.

Using display:flex will allow you to re-order elements using the column/column-reverse properties:

.container{ display:flex;flex-direction:column }
@media screen and (min-width:600px) {
  .container{ flex-direction:column-reverse }
}

See the JSFiddle here, and some support tables here.

Also check out a couple CSS post-processors here and here

Answer 2

Depending on your layout there will be a number of ways of achieving this. If your divs are stacking side by side on the desktop and vertically on mobile you might be able to use a combination of floats and media queries to get them displaying in the right order.

If not your final fallback might be to create 4 divs.

<div>one</div>
<div>three(mobile)</div>
<div>two</div>
<div>three(desktop)</div>

Then use media queries to hide the relevant "three" div depending on the device.

Answer 3

Just use jQuery to change the DOM around as required

if (mobile == true) {

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

Answer 4

You can do this by jquery what you need to do is check the device and insert according to it

also its good to read responsive webdesign where you will learn stuff like that check this qustion Responsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques

i found here good tips and also check this

1. Beginner’s Guide to Responsive Web Design
2. Responsive Web Design