Changing divs order based on width

Question

I've got 3 divs in a wrapper side by side, using:

    <div id="left"><h1>title left</h1></div>
    <div id="right"><h1>title right</h1></div>
    <div id="center"><img src="img/titleimage.jpg"  alt=""/></div>

aligned like this with css:

#left{
width:250px;
float:left;
margin:200px auto;
position:relative;
}

#right{
width:250px;
float:right;
position:relative;
margin:200px auto;
}

#center{
margin:60px auto;
margin-bottom:0;
width:500px;
position:relative;
float:left;
}

I would like for the divs to reorder when the browser window becomes smaller. I would like them to appear top to bottom like this :

LEFT
RIGHT
CENTER

or even better

CENTER
LEFT
RIGHT

Any ideas?

Use a [media query](http://www.w3.org/TR/css3-mediaqueries/) to provide a break point that styles your page differently at different resolutions. See here as well: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries — TylerH, Mar 03 '14 at 22:53
Those margin autos aren't really doing anything if you are using floats. Also, in this case, you don't really have much reason for relative positioning unless you are positioning things within, absolutely. — sheriffderek, Mar 03 '14 at 23:27

score 1 · Answer 1 · answered Mar 03 '14 at 23:20

1

Move the center div all the way to the top

<div id="center"><img src="img/titleimage.jpg"  alt=""/></div>
<div id="left"><h1>title left</h1></div>
<div id="right"><h1>title right</h1></div>

answered Mar 03 '14 at 23:20

Paradoxis

4,471
7
32
66

score 0 · Answer 2 · answered Mar 03 '14 at 23:25

I think the key here is to think about this from a small-screen-first approach.

If your project can use flexbox, that is something you could work with and change the order of div's with CSS, but I am betting that is not the case. I think you are going to have to use a little absolute positioning once you get to a larger screen to get this working. Here is an example: and a fiddle

HTML

<div class="container">
    <div class="inner-w">

        <div class="block center">Center</div>  

        <div class="block left">Left</div>

        <div class="block right">Right</div>

    </div>
</div> <!-- .container -->

CSS

* {
    box-sizing: border-box;
}

.container {
    width: 100%;
    float: left;
    overflow: hidden; /* should be clearfix instead */
}

.container .inner-w {
    position: relative;
    max-width: 50em;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden; /* should be clearfix instead */
}

.block {
    width: 100%;
    float: left;
    min-height: 10em; /* just for show */
}

@media (min-width: 50em) {  

    .center {
        width: 50%;
        position: relative;
        left: 25%;
    }

    .left {
        position: absolute;
        top: 0;
        left: 0;
        width: 25%;
    }

    .right {
        float: right;
        width: 25%;    
    }

} /* end break-point */

Changing divs order based on width

2 Answers2

HTML

CSS

Linked