Step progress bar to be horizontal in mobile

I am trying to implement step progress bar and I have done the below for desktop version.

I want the step progress bar to be horizontal like

I am adding the working fiddle here - https://jsfiddle.net/Durairaj1696/k1cdmhsj/1/

My code is:

<ul class="StepProgress" style="float:left;">
    <li data-target="#myCarousel" data-slide-to="0" class="StepProgress-item active">
                                   </li>
    <li data-target="#myCarousel" data-slide-to="1" class="StepProgress-item">
         </li>
    <li data-target="#myCarousel" data-slide-to="2" class="StepProgress-item">
    </li>
    <li data-target="#myCarousel" data-slide-to="3" class="StepProgress-item">
      </li>
</ul>

Thanks in advance!