Geek asks and answers

How to make middle div first on smaller screen

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

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

| div1 | div2 | div3 |

(all just floating to the left)

They work fine, but when the screen gets smaller, I want them to display as:

| div2 |

| div1 | div3 |

so you had to pull out the middle div and make the top div

Is it possible to do this with css?

any ideas?

+5
source share
1 answer

Can you edit HTML and use absolute positioning? I tend to work from a smaller screen to a larger screen, and one option is as follows:

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 remains 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)";
}
+1
source

More articles:


All Articles