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> | |||||||||||
| |||||||||||
| |||||||||||
![]() ![]() ![]() ![]() | |||||||||||
2022 AnswerTabs | Terms | Contact us |