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 elemen

Answer 1

Just use jQuery to change the DOM around as required

if (mobile == true) {

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

Answer 2

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>

Answer 3

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

Answer 4

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

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

Answer 5

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 6

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.