Change order of DIVs - float to left, right, top, bottom in CSS

How can I change order of DIVs using CSS ? Would you please provide an example how to float DIVs to left, right, top, bottom in parent DIV container when using a responsive design ?

Hi,

To change the order or your DIV elements using CSS, you can use order property in combination with display: flex. For a Safari browser you have to use -webkit-order and -webkit-flex. When you add @media into the following example, you can show DIV elements in different order on desktop computers and mobile devices:


<style>

#parent {
display: flex;
display: -webkit-flex;
}

.a {
order: 1;
-webkit-order: 1;
background-color: aqua;
width: 150px;
text-align: center;
}

.b {
order: 2;
-webkit-order: 2;
background-color: orangered;
width: 300px;
text-align: center;
}

.c {
order: 3;
-webkit-order: 3;
background-color: yellow;
width: 150px;
text-align: center;
}

</style>

<div id="parent">
<div class="a">DIV A</div>
<div class="b">DIV B</div>
<div class="c">DIV C</div>
</div>

When the solution with display: flex isn't the one you are looking for, you can try to re-order the DIV elements using float or left, right, top, bottom properties. In the following example, you can move the middle DIV into the bottom of container:


<style>

@media (max-width: 600px) {

#parent {
position: relative;
width: 300px;
height: 100px;
}

.a {
position: absolute;
background-color: aqua;
width: 150px;
height: 50px;
text-align: center;
left: 0;
}

.b {
position: absolute;
background-color: orangered;
width: 300px;
height: 50px;
text-align: center;
bottom: 0;
}

.c {
position: absolute;
background-color: yellow;
width: 150px;
height: 50px;
text-align: center;
right: 0;
}

}

</style>

<div id="parent">
<div class="a">DIV A</div>
<div class="b">DIV B</div>
<div class="c">DIV C</div>
</div>