Menu
If position: absolute; or position: fixed; - the right property sets the right edge of an element to a unit to the right of the right edge of its nearest positioned ancestor.
Using CSS position property: The position: absolute; property is used to position any element at the absolute position and this property can be used to stack elements on top of each other. Using this, any element can be positioned anywhere regardless of the position of other elements.
Here is a "simple as possible" example, for changing the order of div-elements (when resizing the browser window):
<!DOCTYPE html>
<html>
<head>
<title>foobar</title>
<style>
@media screen and (max-width:300px){
#parent{
display:flex;
flex-flow: column;
}
#a{order:2;}
#c{order:1;}
#b{order:3;}
}
</style>
</head>
<body>
<div id="parent">
<div id="a">one</div>
<div id="b">two</div>
<div id="c">three</div>
</div>
</body>
</html>
Example: http://jsfiddle.net/devnull/qyroxexv/ (change window-width to see the effect of changing the order of the divs)
As has already been suggested, Flexbox is the answer - particularly because you only need to support a single modern browser: Mobile Safari.
See: http://jsfiddle.net/thirtydot/hLUHL/
You can remove the -moz- prefixed properties if you like, I just left them in for future readers.
#blockContainer {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}
#blockA {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
}
#blockB {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
box-ordinal-group: 3;
} <div id="blockContainer">
<div id="blockA">Block A</div>
<div id="blockB">Block B</div>
<div id="blockC">Block C</div>
</div>Using flex, flex-flow and order:
body{
display:flex;
flex-flow: column;
}
#blockA{
order:4;
}
#blockB{
order:3;
}
#blockC{
order:2;
}
Alternatively, reverse the Y scale:
body{
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
div{
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
I known this is old, but I found a easier solution and it works on ie10, firefox and chrome:
<div id="wrapper">
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
</div>
This is the css:
#wrapper {display:table;}
#one {display:table-footer-group;}
#three {display:table-header-group;}
And the result:
"Three"
"Two"
"One"
I found it here.
This method worked for me without flexbox:
#blockA,
#blockB,
#blockC {
border: 1px solid black;
padding: 20px;
}
.reverseOrder,
#blockA,
#blockB,
#blockC {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}<div class="reverseOrder">
<div id="blockA">Block A</div>
<div id="blockB">Block B</div>
<div id="blockC">Block C</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With