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?

score 12 · Answer 1 · answered Oct 12 '12 at 14:04

12

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.

answered Oct 12 '12 at 14:04

Bob Grant

164
2

1

Wouldn't this method be bad practice from a performance point of view? The mobile DOM would be bloated by hidden content. – JonnyIrving Feb 06 '15 at 12:39
On my opinion there's nothing bad to have an extra div in that case, rather then use js for such a small thing. – electroid Oct 13 '16 at 13:55

trapper · Accepted Answer · 2012-10-12T13:30:15.067

11

Just use jQuery to change the DOM around as required

if (mobile == true) {

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

edited Oct 12 '12 at 13:30

answered Oct 12 '12 at 13:12

trapper

11,716
7
38
82

Thanks. I just wasn't sure if this is a good practice. In my particular case, If I were to manipulate the DOM, then HTML5 outline was affected the way I didn't want. It seems like I have to choose between good visual user experience that fulfills the need of business and well structured HTML5 outline. – Lex Semenenko Oct 12 '12 at 13:31
shouldn't the example read `$('div.3')...` instead of `three`? – Brooke. Jun 17 '13 at 20:54
7

Only if you want invalid CSS... :) http://www.w3.org/TR/CSS2/syndata.html#characters – trapper Jun 18 '13 at 05:45
1

If the `mobile` variable is set based on the viewport, a resize handler and additional code to reverse the order is needed. You would now be better of using `flexbox` and `order`: http://caniuse.com/#search=flexbox. – Ronald Mar 09 '17 at 15:25

score 11 · Answer 3 · edited May 23 '17 at 11:45

11

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

edited May 23 '17 at 11:45

Community

1
1

answered Mar 25 '16 at 16:02

mzmm56

1,264
1
14
21

and if you want the elements to be side-by-side you can use `flex-direction` with `row` and `row-reverse`. – Yay295 Aug 11 '16 at 16:26
You can even mix them together and have the elements be side-by-side in one case, and on top of each other in another case. – Yay295 Aug 11 '16 at 16:35
SInce the OP wanted to switch to a non-sequential order in desktop (1, 3, 2), flex's `order` property on the children would come in handy for that purpose. Accessibility note, however: screen readers all currently read things in the DOM order, ignoring `order` changes via CSS. – Max Starkenburg Jul 10 '19 at 16:11

score 4 · Answer 4 · edited May 23 '17 at 12:09

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

edited May 23 '17 at 12:09

Community

1
1

answered Oct 12 '12 at 12:32

NullPoiиteя

56,591
22
125
143

score 0 · Answer 5 · answered Nov 12 '13 at 08:44

Following code will stack the div in mobile and on desktop it would be a 2 column layout

<div class="main">

</div>
<div class="aside">
</div>

<style type="text/css">
   @media only screen and (min-width: 768px) {
      .main {float:right;width:60%}
      .aside {float:left;width:40%}
   }
</style>

score 0 · Answer 6 · answered Nov 13 '13 at 22:35

0

Try with: display: flex; flex-direction: column;

More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/flex

answered Nov 13 '13 at 22:35

Bruno

11

7

Could you pull the relevant information from the linked page and post it in the answer? If the linked page changes, then this answer becomes much less valuable. – Andy Jones Nov 13 '13 at 22:53

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

6 Answers6

Linked