如何在HTML CSS中制作响应式步骤栏

  .container {
      width: 1000px;
      margin: 100px auto; 
  }
  .progressbar {
      counter-reset: step;
  }
  .progressbar li {
      list-style-type: none;
      width: 16.6%;
      float: left;
      font-size: 10px;
      position: relative;
      text-align: center;
      color: #444972;
  }
  .progressbar li:before {
      width: 30px;
      height: 30px;
      content: counter(step);
      counter-increment: step;
      line-height: 30px;
      border: 3px solid #444972;
      display: block;
      text-align: center;
      margin: 0 auto 10px auto;
      border-radius: 50%;
      background-color: white;
  }

  .progressbar li:after {
      width: 100%;
      height: 3px;
      content: '';
      position: absolute;
      background-color: #444972;
      top: 15px;
      left: -50%;
      z-index: -1;
  }
  #last-child:after {
      width: 100%;
      height: 3px;
      content: '';
      position: absolute;
      background-color: #444972;
      top: 15px;
      left: -50%;
      z-index: -1;
  }
#last-child:before {
     display: none;
  }
  .progressbar li:first-child:after {
      /*content: none;*/
  }

  #circle{
    font-size: 24px;
    position: absolute;
    left: 7%;
    top: 16.29%;
    color: #444972;
  }

.outer{position:realative}

.year{
  position: absolute;
    top: -40px;
    left: 50%;
    transform: translatex(-50%);
}

.progressbar{position:relative;}

.progressbar:before{
  content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: black;
    left: -10px;
    top: 12px;
}
.progressbar:after{
      content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent;
    border-left: 10px solid black;
    right: 63px;
    top: 5px;
}

<div class="container">
      <ul class="progressbar">
        <li>
          <div class="outer"><p class="year">1990</p>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</div></li>
          <li>
          <div class="outer"><p class="year">1990</p>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</div></li>
        <li>
          <div class="outer"><p class="year">1990</p>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</div></li>
        <li>
          <div class="outer"><p class="year">1990</p>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</div></li>
        <li>
          <div class="outer"><p class="year">1990</p>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</div></li>
          <li id="last-child"></li>
  </ul>
</div>