<section class="container">
    <div class="box one">One</div>
    <div class="box two">Two</div>
    <div class="box three">Three</div>
    <div class="box four">Four</div>
  </section>

body {
  color: #333;
  font-family: sans-serif;  
}

.container {
  display: flex;
  padding: 5px;
  margin: 0 0 50px 0;
  background-color: #4980D2;
}

.box {
  padding: 15px;
  margin: 5px;
  background-color: #CEE3FE;
  font-family: sans-serif;
  text-align: center;
}
/* 
  We can change order of the elements using order property
  flex items are ordered in Ascending order based on the value of order property
  Value for order can be positive or negative number or 0
*/
.container .one{
  -webkit-order: 4;
  -ms-flex-order: 4;
  order: 4;
}
.container .two{
  -webkit-order: 3;
  -ms-flex-order: 3;
  order: 3;
}
/* We can also ue negative values if we want one item to proceed all other flex items */
.container .three{
  -webkit-order: -1;
  -ms-flex-order: -1;
  order: -1;
}