Change div order with CSS

Question

I've following HTML structure which can not be changed. It contains three vertical divs. I want to change the position of divs using CSS only so that the second div appears at top most and the first and third divs appear after this (only important thing is that second div should appear at top).

I am trying using the following CSS code, it displays the second div at top, but hides the first div. How can I display the other two divs after this? All three div's have different heights.

HTML:

<div class="wrap">
    <div class="one">
       This should be third.
    </div>
    <div class="two">
       This should be first.     
    </div>
    <div class="three">
       This should be second.
    </div>
</div>

CSS:

.wrap{
    width: 100px;
    overflow: hidden;
    position: relative;
}


.one, .two, .three{
    width: 100px;
    margin-bottom: 10px;
    background: yellow;     

}

.two{    
    position: absolute;
    top: 0;
    background: green;
}

JSFiddle: http://jsfiddle.net/UK6vK/

Have you seen [this](http://stackoverflow.com/q/220273/944681)? — Michal Klouda, Oct 16 '12 at 08:27
@TheDOCTORfromTARDIS yes, because i have standard html, and want to change use the above code in media query. — user1251698, Oct 16 '12 at 08:29
@JanHančič no, they have different heights. if they would have fixed heights, i could use absolute position. — user1251698, Oct 16 '12 at 08:32
Then your best option would be to use jQuery. As stated in the link by @MichalKlouda — hjpotter92, Oct 16 '12 at 08:32

score 2 · Accepted Answer · answered Oct 16 '12 at 08:37

2

You use this style code for .one and .three

.one, .three{
width: 100px;
margin-bottom: 10px;
background: yellow;     
float:right;
}

and set for .two this style

.two{    
position: absolute;
top: 0;
background: green;
left:0;
width:100%;
}

answered Oct 16 '12 at 08:37

Saeed

3,415
3
24
41

score 1 · Answer 2 · answered Sep 17 '13 at 17:29

None of these worked for me, but a couple tweaks to Saeed's seems to - basically duplicate the second div and use it for layout only, ie,

HTML

<div class="wrap">
<div style="position:relative;" class="two">
    <strong>This should be first..</strong>  
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor diam eget lorem vehicula aliquam. Aliquam ac tellus eget justo facilisis malesuada. Curabitur mi sapien.</p>        
</div>
<div class="one">
    <strong>This should not be first..</strong>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  </p>
</div>
<div class="two">
    <strong>This should be first..</strong>  
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor diam eget lorem vehicula aliquam. Aliquam ac tellus eget justo facilisis malesuada. Curabitur mi sapien.</p>        
</div>
<div class="three">
    <strong>This can be 2nd or third.</strong>
       <p> Aliquam ac tellus eget justo facilisis malesuada. Curabitur mi sapien, bibendum sed eleifend non, pretium eget arcu. Vivamus et augue nec quam rutrum tempor in in urna. </p>
</div>
</div>

position:relative means other elements will be shifted down by this element (which anyway appears behind/in front of the DIV that's been shifted up).

CSS:

.one, .three{
width: 100%;
margin-bottom: 10px;
background: yellow;     
float:right;
}
.two{    
position: absolute;
top: 0;
background: green;
left:0;
width:100%;
margin-bottom:10px;
}

I realize you said the HTML can't be changed so pedantically-speaking this isn't an answer to your question, however in my case the reason I can't change the HTML structure is because I want a default mobile layout that re-orders when @media is screen and (min-width: 700px;). I can make the dummy div disappear (z-index or whatever) unless I need it for re-organizing the layout (without relying on JS).

http://jsfiddle.net/UK6vK/83/

Change div order with CSS

2 Answers2