Changing divs order based on width [duplicate]

Question

This question already has an answer here:

Change div order with CSS depending on device-width (1 answer)

Closed 3 years ago.

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?

Answer 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>

Answer 2

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 */