Reorder Elements using CSS | Drupal 8

Reorder Elements using CSS

Submitted by editor on Fri, 07/01/2016 - 15:16
Question

How to reorder elements (div) by 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>

Tags

Add new comment