<img src="http://southparkstudios.mtvnimages.com/shared/characters/non-human/underpants-gnomes.png" alt="underpants gnomes" class="spg"/>

<ol class="mylist reversed">
  <li>
    <h3>Collect Underpants</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero voluptas, aut modi et inventore rem praesentium ab ipsam, accusantium suscipit iure facere omnis mollitia eligendi maxime perferendis explicabo sint sequi.</p>
  </li>
  <li>
    <h3>...</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero voluptas, aut modi et inventore rem praesentium ab ipsam, accusantium suscipit iure facere omnis mollitia eligendi maxime perferendis explicabo sint sequi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus sint deserunt quos officia ut deleniti officiis nobis quam itaque sed, illum asperiores labore temporibus. Cumque quo, illum ut optio unde!</p>
  </li>
  <li>
    <h3>Profit!</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero voluptas, aut modi et inventore rem praesentium ab ipsam, accusantium suscipit iure facere omnis mollitia eligendi maxime perferendis explicabo sint sequi.</p>
  </li>
  
</ol>

body{ 
  font-family: sans-serif;
}
.spg{
  display:block;
  width:320px;
  margin:auto;
}
.mylist{
  position:relative;
  counter-reset: steps 4;
  list-style-type: none ;
  padding:0;
  display: block;
  margin:auto;
  text-align: center;
}
.mylist::before{
  content: "";
  position:relative;
  display: none;
  border-bottom: 2px solid black;
  width: 730px;
  margin:auto;
  top:54px;
}

.mylist li{
  display:inline-block;
  padding:15px;
  vertical-align: top;
  position:relative;
}

.mylist li::before{
  display:block;
  content: counter(steps);
  counter-increment: steps -1;
  border:2px solid black;
  border-radius:35px;
  background:#E7FF9B;
  width:50px;
  height: 50px;
  margin: 10px auto;
  line-height:50px;
  text-align:center;
  font-size:32px;
  box-shadow:0px 4px 5px rgba(0, 0, 0, .6);
}
@media(min-width:1100px){
  .mylist li{
    display:inline-block;
    width:300px;
    margin:0 15px 15px 0;
    border-radius:10px;
    padding:15px;
    }
  .mylist:before {
    display:block;
  }
  
/*   .mylist li:after{
    display:block;
    content: "";
    border-bottom:2px solid #bada55;
    width:200px;
    position: absolute;
    top:50px;
    margin-left:-125px;
  } */
  .mylist li:first-child:after{
    display:none;
  }
}
// Forked from Jay Wolters:
// https://codepen.io/jaywolters/pen/RrYmMm

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.