Switch Objects in Side Panel in CSS - css

Question

I have two boxes within each of my member's profile page on my forum that I would like to switch.
Screenshot:
http://s22.postimg.org/69aqe1i29/panel.jpg
I want the "About" section below the "My Badges" section
is this possible within just CSS?
direct link to page in question: http://idenitties.com/vanilla/profile/3/test1

Answer 1

Reordering the HTML is your best option. If this is generated content and you're unable to modify it in any way, you can use Flexbox to do reorder them.
http://tinker.io/9d3f8/1
.container {
display: -webkit-box;
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.about {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-webkit-flex-order: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
<div class="container">
<div class="about">
About (first in source)
</div>
<div class="badges">
Badges (second in source)
</div>
</div>
The up side is that you don't need to know the sizes of either of the elements. The down side is that browser support is limited: IE10, Chrome, Opera, Firefox, Safari
http://caniuse.com/#feat=flexbox

Answer 2

The best way would be to swap the <div> in the HTML but you can use a little absolute positioning to move the divs around.
For example this would work:
.about{
position: absolute;
width: 230px;
bottom: -30px;
}
But I would say the best option would be to just change the ordering in the HTML, simple copy paste.

Answer 3

If box height is constant you may switch them using relative positioning. I mean you may shift top box to down for height of bottom box and otherwise.
.Box.About {
position: relative;
top: 114px;
}
.Box.PeregrineBadgesBox {
position: relative;
top: -178px;
}