2

I'm working on my responsive site where Html structure is like this :

<div id="container">
    <div id="first">FIRST</div>
    <div id="second">SECOND</div>
    <div id="third">THIRD</div> 
</div>

Div #First, #Second & #Third have float : left

So, When Browser width is more than 1280px They appears in following order :

== 1 == 2 == 3 ==

& When Browser width is less than 767px, They shrinks in width & appears one below the other as per my css3 media queries:

== 1 ==

== 2 ==

== 3 ==

What I want to achieve is, When Browser width is less than 767px their order should be :

== 1 ==

== 3 ==

== 2 ==

You can see DOM Structure Jsbin Here

How can I achieve this with pure CSS3 ?

2
  • the demo in jsbin is not doing what is asked, it does 1 - 2 - 3, not 1 - 3 -2
    – unludo
    Feb 8, 2012 at 13:56
  • I mean, my DOM Structure jsBin. Corrected It Now.
    – MANnDAaR
    Feb 8, 2012 at 14:14

3 Answers 3

2

try floating the third and second right and reordering them like you want here is jsbin

#first, #third {width:250px;height: 200px;background: #aaa;float: left;text-align: center}
#second {width: 460px;height: 200px;background: #ddd;float: left;text-align: center}
#third, #second { float:right;}

Html:

<div id="first">FIRST</div>
<div id="third">THIRD</div>
<div id="second">SECOND</div>
1

You can't do that with CSS... yet.

If any browser supported the advanced layout module you could do this:

/* Default to small size */
#container {display: "a" "b" "c"}
#first {position: "a"}
#second {position: "c"}
#third {position: "b"}

/* Move #third to bottom on slightly larger resolutions */
@media only screen and (min-width: 768px) {
    #first {position: "a"}
    #second {position: "b"}
    #third {position: "c"}
}

/* Display side by side on even larger resolutions */
@media only screen and (min-width: 992px) {
    #container {display: "abc"}
    #first {position: "a"}
    #second {position: "b"}
    #third {position: "c"}
}
2
  • Actually it seems media queries are already well supported by browsers. See this: caniuse.com/#feat=css-mediaqueries. Very interesting! :)
    – unludo
    Feb 8, 2012 at 16:42
  • It's not the media queries that are unsupported (I use them constantly) it's the advanced layout module (display: "abc", position: "a" etc).
    – powerbuoy
    Feb 9, 2012 at 4:42
0

Alright, this solution is dependent on knowing the height of each div. If you don't know the height beforehand, you would need to use javascript to get the height and apply your changes there.

Here's the code:

    @media only screen and (min-width: 480px) and (max-width: 767px)
{
    #container {width: 300px;}
    #first{width:300px;height: 200px;}
    #second {
        width: 300px;
        height: 200px;
        top: 200px;
        position: relative;
    }
     #third {
     background: blue;
     position: relative; 
     width: 300px; 
     height: 200px;
     top: -200px;
     }
}

You set their positions to relative and specify the top property. For the third element to switch with the second, you have to give it a negative top value of the second element's height. Then you simply give the second element a top value equal to the third element's height. That will cause them to switch places in your layout.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.