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

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