Responsive web design scenario

Question

I am designing a 3 column web page layout like below.

To make it responsive I specified widths in %, min width in pixels and float:left. Now If I resize the page, all 3 DIVs (1,2, and 3) get resized first then 3rd DIV moves below of 1st DIV. If I resize more then 2nd DIV moves to below of 1st and 3rd moves below to 2nd.

This is because of float property. But I want to modify it in such a way that 3rd DIV should be moved first (as it is already being) then 1st DIV should be moved instead of 2nd DIV. 2nd DIV must be on the top.

How can I do this?

Answer 1

Reordering can be done with Flexbox. You will, however need 1 media query.

http://codepen.io/cimmanon/pen/fwqed

body {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

div {
  -webkit-flex: 1 1 20em;
  -ms-flex: 1 1 20em;
  flex: 1 1 20em;
}

@media (max-width: 40em) {
  .a, .c {
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }
}
.a {
  background: orange;
}

.b {
  background: yellow;
}

.c {
  background: grey;
}

Reordering can also be done with relative positioning (see: https://stackoverflow.com/questions/16307621/reordering-elements-at-specific-browser-widths).