Swap div order using css only - html

Question

I am wondering if it's possible to display two div elements in inverted order using only css.
No html change or javascript code, just css.
I have the following html:
<div id="container" class="clearfix">
<div id="right-sidebar">Right</div>
<div id="left-sidebar">Left</div>
</div>
and this current css:
#container {
width: 200px;
border: 2px solid blue;
padding: 2px;
margin: 0;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#left-sidebar, #right-sidebar {
width: 150px;
padding: 2px;
}
#left-sidebar {
border: 2px solid red;
float: left;
}
#right-sidebar {
border: 2px solid green;
float: right;
}
The result shows the right div above the left one. I'd like to swap them, showing the left one above the right one, maintaining the container properties (auto calculated height).
To explain it in different words, I'd like to achive using just CSS the same result I would obtain by swapping the two divs in the html code.
Is it even possible with only css? [I'm dreaming about a float: bottom property :)]
http://jsfiddle.net/mT7JJ/1/

Answer 1

According to this and many others, i am afraid you can not swap only with css, but I've found something that will help you in this situation and that is this
So this will be your edit on fiddle
#container {
display: table; width: 200px;
border:1px red solid;
}
#left-sidebar {
display: table-header-group;
}
#right-sidebar {
display: table-footer-group;
}

Answer 2

The only think i can think about is relative/absolute position. But it will not be really efficient though

Answer 3

One modern solution, as has been comented, is flex layout.
Another tricky posibilitity is using transforms
webkit demo
I an just rotating the container upside down, and then rotaing the inner divs to make them look ok. It's done in the hover, to show the net effect.
The hover is a little bit inestable due to the clearfix, but this is not relevant here.
#container:hover {
-webkit-transform: rotateX(180deg);
}
#container:hover div {
-webkit-transform: rotateX(180deg);
}
I enjoy answering a question that has been declared imposible :-)

Answer 4

<div id="container" class="clearfix">
<div id="left-sidebar">Left</div>
<div id="right-sidebar">Right</div>
</div>
#container {
width: 200px;
border: 2px solid blue;
padding: 2px;
margin: 0;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#left-sidebar, #right-sidebar {
width: 150px;
padding: 2px;
}
#left-sidebar {
border: 2px solid red;
}
#right-sidebar {
border: 2px solid green;
}
check this left div above right div

Answer 5

Using CSS only:
#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>
http://jsfiddle.net/hLUHL/713/

Answer 6

no expert and old question but use case apply for me under specific conditions to anwser this question: "Swap div order using css only"
My answer is almost entirely based on Harry's answer here https://stackoverflow.com/a/31366853/3913379 (Original Answer v2) and tested nowadays (Chrome/FF) under the condition that the child divs are same size (use case is main Div contains TWO divs with link icons and text).
So to swap TWO divs left to right and vice versa using CSS only I used a css transform on X axis (transform: translateX ), like this:
<STYLE type="text/css">
#Child1Div {transform: translateX(100%);}
#Child2Div {transform: translateX(-100%);}
</STYLE>
<div id="MotherDiv" >
<div id="Child1Div">Context of child one</div>
<div id="Child2Div">Content of child two</div>
</div>
So, note usage of percentages and negative values in one case, to attain basically "the swap". HTML structure is unchanged (and JS/JQuery listeners were unaffected, for example link's onClick(...) )
This may fail under some inherited special styles but simple case worked nicely for me.
Style can be applied in HEAD tag or inline on divs or also dynamically via JS (for example to swap two Icons/Images via a button click or something like that)

Answer 7

There are two ways to do that with css. Flex and Grid.
Flex:
#container {
display: flex;
flex-wrap: wrap;
position: relative;
justify-content: flex-start;
flex-direction: row-reverse;
}
Grid:
#container {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr))
}
#left-sidebar {
order 2
}
#right-sidebar {
order 1
}