Changing divs order based on width [duplicate] - css

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