<h4># order</h4>
<div class="d-flex">
  <div id="bi1" class="box-item">1(order:0;)</div>
  <div id="bi2" class="box-item">2(order:1;)</div>
  <div id="bi3" class="box-item">3(order:-1;)</div>
  <div id="bi4" class="box-item">4(order:2;)</div>
  <div id="bi5" class="box-item">5 (order:-2;)</div>
</div><hr>

*{
  box-sizing:border-box;
}
.d-flex{
  height:150px;
  background-color:silver;
  display:-wibkit-flex;
  display:flex;
}
.box-item{
  font-size:10px;
  width:20%;
  height:50px;
  background-color:lime;
  border:solid 1px;
  text-align:center;
  padding-top:16px;
  margin:5px;
}

#bi1{
  order:0; /* 初期値 */
}
#bi2{
  order:1;
}
#bi3{
  order:-1;
}
#bi4{
  order:2;
}
#bi5{
  order:-2;
}