<div class="wrapper">
            <h2>Flex - Order Property - Normal Order</h2>
            <div class="icon">&#8595;</div>
    <div class="flex-parent">
                <div class="flex-child flex-child-1 order-1">
                    1
                </div>
                <div class="flex-child flex-child-2 order-2">
                    2
                </div>
                <div class="flex-child flex-child-3 order-3">
                    3
                </div>
                <div class="flex-child flex-child-4 order-4">
                    4
                </div>
            </div>
          
    <h2>Order Property - Re-arranged Order</h2>
            <div class="icon">&#8595;</div>
          
  
    <div class="flex-parent">
                <div class="flex-child flex-child-1 order-3">
                    1
                </div>
                <div class="flex-child flex-child-2 order-1">
                    2
                </div>
                <div class="flex-child flex-child-3 order-4">
                    3
                </div>
                <div class="flex-child flex-child-4 order-2">
                    4
                </div>
            </div>
        </div>
*{
  margin:0;
  padding:0;
  box-sizing: border-box;
  font-family: 'Exo 2', sans-serif;
}
.wrapper{
  width: 750px;
  height: auto;
  padding: 30px;
  margin: 50px auto;
}
.flex-parent{
  display:flex;
  margin-bottom:50px;
  text-align: center;
  border: 5px solid #70409F;
  padding: 10px;
}

.flex-child{
  width:150px;
  padding: 20px;
/*   line-height:150px; */
  margin:5px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
.flex-child-1{
   background-color:#A6E7FF;
}
.flex-child-2{
  background-color:#C8F1D6;
}
.flex-child-3{
  background-color:#E6D0F7;
}
.flex-child-4{
  background-color:#FFDDD3;
}
.order-1{
    order: 1;
}
.order-2{
    order: 2;
}
.order-3{
    order: 3;
}
.order-4{
    order: 4;
}
h2{
    text-align: center;
    margin-bottom: 10px;
    font-size: 30px;
    font-weight: bold;
}
.icon {
    text-align: center;
    font-size: 25px;
    margin-bottom: 5px;
}

External CSS

  1. https://fonts.googleapis.com/css2?family=Exo+2:wght@300&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.