CODEWITHSUNDEEP
cssmedia-queries
MANnDAaR
MANnDAaR

Reputation: 2590

Playing with float in CSS3 Media Queries

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 ?

Upvotes: 2

Views: 2528

Answers (3)

Alex Morales
Alex Morales

Reputation: 1191

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.

Upvotes: 0

powerbuoy
powerbuoy

Reputation: 12838

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"}
}

Upvotes: 1

Caleb Doucet
Caleb Doucet

Reputation: 1781

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>

Upvotes: 2

Related Questions