How to make middle div the first on smaller screen

Question

I have 3 divs that are displayed side by side when the screen is wide:

<div class="div1"></div><div class="div2"></div><div class="div3"></div>

---

| div1 | div2 | div3 |

(all are just floating left)

These are working fine but when the screen gets smaller, I want them to display as:

---

| div2 |

| div1 | div3 |

so what was the middle div has to be pulled out and made the top div

can I do this with css?

any ideas?

Answer 1

Are you able to edit the HTML and use absolute positioning? I tend to work from smaller screen to larger screen and one option is to then use the following:

HTML

<div class="div2"></div><div class="div1"></div><div class="div3"></div>

CSS

div {
    float: left;
}

Then, when the screen is large enough (using mediaqueries to check): HTML stays the same

CSS

div.div1 {
    float: none;
    position: absolute;
    top: 0;
    left: 0;
}
div.div2 {
    display: inline; /* pesky older IE */
    margin-left: "width of div.div1 (%/em/px)";
}