Reorder div using css

Question

I have divs sorted 1, 2, 3 ... as html layout

HTML:

<div class="bigdiv"> <div class="div1">div 1</div> <div class="div2">div 2</div> <div class="div3">div 3</div> </div> 

CSS

 .div1 { float: left; } .div2 { float: left; } .div3 { float: left; } 

How can I reorder divs to this layout with CSS

 <div class="bigdiv"> <div class="div3">div 3</div> <br> <div class="div1">div 1</div> <div class="div2">div 2</div> </div> 

using CSS (float ,: after ,: before)

My attempt:

 .div3 { float: right; } .div3:before { content: '\A\A'; white-space: pre; } 

Thanks in advance.

Answer 1

You can try to reproduce the display property and use this style:

CSS

 .bigdiv { display:table; } .div1, .div2 { float: left; } .div3 { display: table-header-group; } 

---

Real-time example: http://jsbin.com/axekof/2/edit

Pay attention to display:table; applied to the main shell and the display property applied to .div3 . Example should work even on IE8 (not tested)

As a sidenote for .div3 you can use either display: table-caption or display: table-header-group , but there is a slight difference: with the first property, the parent element wraps only .div1 and .div2 , and with the last, the container wraps all children (try applying a border to .bigdiv so you can clearly see the difference)

Answer 2

You can do this using the CSS Flexible Box Layout Module

The "order" property controls the order in which flex items are displayed within their flexible container, assigning them to ordinal groups.

The bending container will lay out its content, starting with the lowest numbered ordinal group and rising. Elements with the same ordinal group are laid out in the order in which they appear in the original document. This also affects the drawing order [CSS21], just as if the elements were reordered in the document. ( W3.org )

Fiddle

CSS (no browser features)

 .bigdiv { display: flex; flex-direction: row; } .div1 { order: 2; } .div2 { order: 3; } .div3 { order: 1; } 

Answer 3

HTML:

 <div class="bigdiv"> <div class="div1">div 1</div> <div class="div2">div 2</div> <div class="div3">div 3</div> </div> 

CSS

 .bigdiv { display:table; width:100%; } .div1 { display: table-row-group; } .div2 { display: table-footer-group; } .div3 { display: table-header-group; } 

The result will be:

div 3

div 1

div 2

And for these annoying early versions of Internet Explorer ... Source

In older browsers, IE6 and IE7 do not support the CSS display properties: table family.

In addition, IE8 has a dynamic rendering error that occurs in some cases: if the block to move contains preudo-table (display: table *) elements (this is the only error case noted at the moment), some pseudo-table cells (such cells, as well as the number of cells are different each time the page is reloaded) may accidentally disappear when the page is initially displayed.

So, for IE8 and below, we can redefine the CSS rules that make blocks stable, and optionally move the blocks to the required positions in the DOM tree of the HTML document with JavaScript instead of CSS:

 /** * Reorders sibling elements in DOM tree according to specified order. * @param {Array} elems Sibling elements in desired block order. */ function reorderElements(elems) { var count = elems.length; if (!count) { return; } var parent = elems[0].parentNode; for (var i = count - 1; i >= 0; i--) { parent.insertBefore(elems[i], parent.firstChild); } } // If IE8 or lower if (document.all && !document.addEventListener) { var blocks = [ document.getElementById('div3'), document.getElementById('div2'), document.getElementById('div1') ]; reorderElements(blocks); } 

Answer 4

You cannot do this with CSS alone, as I can see that you are manipulating the DOM. However, if you still want to achieve this, you will need to use position:relative for bigdiv and position:absolute for .div1 .div2 and .div3 , which are actually children of .bigdiv . Then you will need to use the left , top , right and bottom properties to style them as needed.