Responsive Progress Bar Vertical Alignment - html

Question

I have a responsive multi step progress bar, link here and code snippet below;
.multi-steps > li.is-active:before, .multi-steps > li.is-active ~ li:before {
content: counter(stepNum);
font-family: inherit;
font-weight: 700;
}
.multi-steps > li.is-active:after, .multi-steps > li.is-active ~ li:after {
background-color: #ededed;
}
.multi-steps {
display: table;
table-layout: fixed;
width: 100%;
}
.multi-steps > li {
counter-increment: stepNum;
text-align: center;
display: table-cell;
position: relative;
color: tomato;
}
.multi-steps > li:before {
content: '\f00c';
content: '\2713;';
content: '\10003';
content: '\10004';
content: '\2713';
display: block;
margin: 0 auto 4px;
background-color: #fff;
width: 36px;
height: 36px;
line-height: 32px;
text-align: center;
font-weight: bold;
border-width: 2px;
border-style: solid;
border-color: tomato;
border-radius: 50%;
}
.multi-steps > li:after {
content: '';
height: 2px;
width: 100%;
background-color: tomato;
position: absolute;
top: 16px;
left: 50%;
z-index: -1;
}
.multi-steps > li:last-child:after {
display: none;
}
.multi-steps > li.is-active:before {
background-color: #fff;
border-color: tomato;
}
.multi-steps > li.is-active ~ li {
color: #808080;
}
.multi-steps > li.is-active ~ li:before {
background-color: #ededed;
border-color: #ededed;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<br /><br />
<ul class="list-unstyled multi-steps">
<li>Start</li>
<li class="is-active">First Step</li>
<li>Middle Stage</li>
<li>Finish</li>
</ul>
</div>
This works fine but on smaller screens (e.g max-device-width: 480px), portrait mode i'd like to stack the steps vertically.
How can I achieve this?

Answer 1

Inside your media query, change display: table-cell to display: block on the .multi-steps > li element. That should get you close to what you want to achieve. You'll also need to apply some additional styling just to neat it out. Hope that helps.
e.g.
.multi-steps > li {
display: block;
}

Answer 2

Add a <span> element arounf the text, the use this CSS
.multi-steps > li {
display: block;
position: relative;
padding-bottom: 45px;
}
.multi-steps > li:before {
content: '\f00c';
content: '\2713;';
content: '\10003';
content: '\10004';
content: '\2713';
display: block;
margin: 0 auto 4px;
background-color: #fff;
width: 36px;
height: 36px;
line-height: 32px;
text-align: center;
font-weight: bold;
border-width: 2px;
border-style: solid;
border-color: tomato;
border-radius: 50%;
}
.multi-steps > li:after {
content: '';
height: 2px;
width: 100%;
background-color: tomato;
position: absolute;
left: 50%;
z-index: -1;
display: inline-block;
top: 0;
left: 50%;
width: 3px;
height: 105px;
}
.multi-steps > li span.step {
margin-left: 50px;
position: relative;
top: 20px;
}