<div class="box">
  <div class="first-item">
    <h1> 1 </h1>
  </div>
  <div class="second-item">
    <h1> 2</h1>
  </div>
  <div class="third-item">
    <h1> 3</h1>
  </div>
  <div class="fourth-item">
    <h1>4 </h1>
  </div>
</div>
.box{
  display: flex;
  flex-direction: row-reverse
}
.first-item{
  border-style: solid;
  border-width: 1.5px;
  margin: 2px;
  text-align: center;
  background-color: seashell;
  
}
.second-item{
  border-style: solid;
  border-width: 1.5px;
  margin: 2px;
  text-align: center;
  background-color: oldlace;
 
}
.third-item{
  border-style: solid;
  border-width: 1.5px;
  margin: 2px;
  text-align: center;
  background-color: floralwhite;
 
}
.fourth-item{
  border-style: solid;
  border-width: 1.5px;
  margin: 2px;
  text-align: center;
  background-color: ivory;
 
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.