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 ?

10 Jun 2021 at 08:40 AM

Stor

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>

23 Jun 2021 at 09:57 AM

Tim

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

Different background color for Odd / Even table rows - CSS

CSS font-size units PX to PT, IN, EM, REM conversion

Smooth move of HTML elements - animation with CSS

Full screen Not Clickable overlapping layer / overlay - CSS

How to change Checkbox to Toggle slider button using CSS ?

Set CSS/HTML opacity - transparent background but not text

Resize / shrink top navigation menu bar on Scroll in Javascript