<div class="canvas">
  
  <main class="l-main">
    <h1 class="head">flex-direction: row</h1>
    <ul class="directionList directionList-row">
     <li class="directionList_item">
       <p>item1</p>
     </li>
     <li class="directionList_item">
       <p>item2</p>
     </li>
     <li class="directionList_item">
       <p>item3</p>
     </li>
    </ul>

    <h1 class="head">flex-direction: row-reverse</h1>
    <ul class="directionList directionList-rowRev">
     <li class="directionList_item">
       <p>item1</p>
     </li>
     <li class="directionList_item">
       <p>item2</p>
     </li>
     <li class="directionList_item">
       <p>item3</p>
     </li>
    </ul>

    <h1 class="head">flex-direction: column</h1>
    <ul class="directionList directionList-column">
     <li class="directionList_item">
       <p>item1</p>
     </li>
     <li class="directionList_item">
       <p>item2</p>
     </li>
     <li class="directionList_item">
       <p>item3</p>
     </li>
    </ul>

    <h1 class="head">flex-direction: column-reverse</h1>
    <ul class="directionList directionList-columnRev">
     <li class="directionList_item">
       <p>item1</p>
     </li>
     <li class="directionList_item">
       <p>item2</p>
     </li>
     <li class="directionList_item">
       <p>item3</p>
     </li>
    </ul>
    
    <h1 class="head">order</h1>
    <ul class="directionList directionList-order">
     <li class="directionList_item">
       <p>item1</p>
     </li>
     <li class="directionList_item">
       <p>item2</p>
     </li>
     <li class="directionList_item">
       <p>item3</p>
     </li>
    </ul>
  </main>
</div>
/* ----------
 Base
---------- */
* {
  box-sizing: border-box;
}

body {
  padding: 40px;
  background: #eaedf2;
}


/* ----------
 Layout
---------- */
/* Hack Canvas */
.canvas {
  margin: 0 auto;
  width: 100%;
  max-width: 1000px;
  min-height: 400px;
  background: #fff;
}

/* Header */
.l-main {
  padding: 20px;
  width: 100%;
}


/* ----------
 Module
---------- */
.head {
  margin-bottom: 20px;
  padding: 10px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  background: #43cbff;
}

.directionList {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  
  &-row {
    flex-direction: row;
  }
  
  &-rowRev {
    flex-direction: row-reverse;
  }
  
  &-column {
    flex-direction: column;
  }
  
  &-columnRev {
    flex-direction: column-reverse;
  }
  
  &-order {
    
    .directionList_item:nth-child(1) {
      order: 2;
    }
    
    .directionList_item:nth-child(2) {
      order: 3;
    }
    
    .directionList_item:nth-child(3) {
      order: 1;
    }
  }
  
  &_item {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    width: 30%;
    min-height: 40px;
    background: linear-gradient(90deg, #c92024, #483a9f);
  }
}
View Compiled

External CSS

  1. https://fonts.googleapis.com/icon?family=Material+Icons

External JavaScript

  1. https://code.jquery.com/jquery-1.12.4.min.js