html - How can I reorder my divs using only CSS?

ID : 10267

viewed : 11

Tags : htmlcsshtml

Top 5 Answer for html - How can I reorder my divs using only CSS?

vote vote

95

This solution uses only CSS and works with variable content

#wrapper   { display: table; } #firstDiv  { display: table-footer-group; } #secondDiv { display: table-header-group; } 
vote vote

80

A CSS-only solution (works for IE10+) – use Flexbox's order property:

Demo: http://jsfiddle.net/hqya7q6o/596/

#flex { display: flex; flex-direction: column; }  #a { order: 2; }  #b { order: 1; }  #c { order: 3; }
<div id="flex">     <div id="a">A</div>     <div id="b">B</div>     <div id="c">C</div>  </div>

More info: https://developer.mozilla.org/en-US/docs/Web/CSS/order

vote vote

70

As others have said, this isn't something you'd want to be doing in CSS. You can fudge it with absolute positioning and strange margins, but it's just not a robust solution. The best option in your case would be to turn to javascript. In jQuery, this is a very simple task:

$('#secondDiv').insertBefore('#firstDiv'); 

or more generically:

$('.swapMe').each(function(i, el) {     $(el).insertBefore($(el).prev()); }); 
vote vote

62

This can be done using Flexbox.

Create a container that applies both display:flex and flex-flow:column-reverse.

/* -- Where the Magic Happens -- */    .container {        /* Setup Flexbox */    display: -webkit-box;    display: -moz-box;    display: -ms-flexbox;    display: -webkit-flex;    display: flex;      /* Reverse Column Order */    -webkit-flex-flow: column-reverse;    flex-flow: column-reverse;    }      /* -- Styling Only -- */    .container > div {    background: red;    color: white;    padding: 10px;  }    .container > div:last-of-type {    background: blue;  }
<div class="container">        <div class="first">         first      </div>        <div class="second">        second      </div>      </div>

Sources:

vote vote

55

There is absolutely no way to achieve what you want through CSS alone while supporting pre-flexbox user agents (mostly old IE) -- unless:

  1. You know the exact rendered height of each element (if so, you can absolutely position the content). If you're dealing with dynamically generated content, you're out of luck.
  2. You know the exact number of these elements there will be. Again, if you need to do this for several chunks of content that are generated dynamically, you're out of luck, especially if there are more than three or so.

If the above are true then you can do what you want by absolutely positioning the elements --

#wrapper { position: relative; } #firstDiv { position: absolute; height: 100px; top: 110px; } #secondDiv { position: absolute; height: 100px; top: 0; } 

Again, if you don't know the height want for at least #firstDiv, there's no way you can do what you want via CSS alone. If any of this content is dynamic, you will have to use javascript.

Top 3 video Explaining html - How can I reorder my divs using only CSS?

Related QUESTION?