Bootstrap - Progress Indicator

I have an app that uses Bootstrap 3. I am trying to make a responsive progress indicator. The indicator has between three and five steps. Each step shows an icon, the step name, and the step status. When on mobile, I'm trying to make it look like this:

o  Step 1
|  completed monday
|
o  Step 2
|  in progress
|
o  Step 3
   to be done

When the screen appears on anything other than a phone, I'm trying to show it like this:

        o----------------o---------------o
     Step 1            step 2          step 3
completed Monday     in progress     to be done

In an effort to create this I current have the following code, which can be seen in this bootply.

<div class="row">
  <div class="col-xs-12">
    <ul class="list-unstyled"> 
      <li>
        <i class="fa fa-circle"></i>
        Step 1<br>
          <span class="text-muted">completed monday</span>
      </li>
      <li>
        <i class="fa fa-bullseye"></i>
        Step 2<br>
        <span class="text-muted">in progress</span>
      </li>
      <li>
        <i class="fa fa-circle-o"></i>
        <span class="text-muted">to be done</span>
      </li>
    </ul>
  </div>
</div>

I'm not sure how to get the line between the circles. Is there a way to do this with bootstrap or CSS? If so, how?

Thanks!