Reorder Elements using CSS

Example :

<style>

#parent-div { display: flex; }

#el1 { order: 3; }

#el2 { order: 2; }

#el3 { order: 1; }

</style>

<div id="parent-div">

   <div id="el1">A</div>

   <div id="el1">B</div>

   <div id="el1">C</div>

</div>

Another Solution:

.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 element

  </div>

  <div class="second">

    second Element

  </div>

</div>