如何使这个CSS进度跟踪器响应？

Question

如何让这个CSS进度跟踪器响应？

我想让“步骤”在一个太小而不能水平放置的屏幕上查看时叠加在彼此之上。

下面包含的代码段，如果您愿意，可以使用jsfiddle：https://jsfiddle.net/yr6kwzcv/

/* Resets the ordered list styles and makes the list elements be displayed in a single line */
.track-progress {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.track-progress li {
  list-style-type: none;
  display: inline-block;

  position: relative;
  margin: 0;
  padding: 0;

  text-align: center;
  line-height: 30px;
  height: 30px;

  background-color: #f0f0f0;
}

/* Make it occupy all the available width */
.track-progress[data-steps="3"] li { width: 33%; }
.track-progress[data-steps="4"] li { width: 25%; }
.track-progress[data-steps="5"] li { width: 20%; }

/* Adds a "done" class to represent the progress */
.track-progress li > span {
  display: block;

  color: #999;
  font-weight: bold;
  text-transform: uppercase;
}

.track-progress li.done > span {
  color: #666;
  background-color: #ccc;
}

/* add the arrows */
.track-progress li > span:after,
.track-progress li > span:before {
  content: "";
  display: block;
  width: 0px;
  height: 0px;

  position: absolute;
  top: 0;
  left: 0;

  border: solid transparent;
  border-left-color: #f0f0f0;
  border-width: 15px;
}

.track-progress li > span:after {
  top: -5px;
  z-index: 1;
  border-left-color: white;
  border-width: 20px;
}

.track-progress li > span:before {
  z-index: 2;
}

/* Make arrows match the color of the previous step and remove arrow from first element */
.track-progress li.done + li > span:before {
  border-left-color: #ccc;
}

.track-progress li:first-child > span:after,
.track-progress li:first-child > span:before {
  display: none;
}

/* Adds arrows appearance to the start and end */
.track-progress li:first-child i,
.track-progress li:last-child i {
  display: block;
  height: 0;
  width: 0;

  position: absolute;
  top: 0;
  left: 0;

  border: solid transparent;
  border-left-color: white;
  border-width: 15px;
}

.track-progress li:last-child i {
  left: auto;
  right: -15px;

  border-left-color: transparent;
  border-top-color: white;
  border-bottom-color: white;
}

 <ol class="track-progress" data-steps="3">
   <li class="done">
     <span>Site Information</span>
     <i></i>
   </li><!--
--><li class="done">
     <span>Data Source</span>
   </li><!--
--><li>
     <span>Final Details</span>
     <i></i>
   </li>
 </ol>

以上是我在上面重新创建的代码段的来源：https://coderwall.com/p/-7trcg/simple-css-only-wizard-progress-tracker