Working on page flow in responsiveness using css and images - css

Question

I am working on the below reference image work on responsiveness using css media query and images. I am trying to avoid position I am not getting the excact output which I required.
Here is my Fiddle link
Here is my HTML Code
<div class="container-fluid">
<div class="row-fluid">
<div class="flw_width">
<label class="pull-left flw_text green_prog_text">Basic Information</label>
<div class="col-xs-4 col-sm-4 col-md-1">
<div class="flw_circle_green">
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-3">
<div class="green_prog">
</div>
</div>
<label class="pull-left flw_text cst_text">Education & Health</label>
<div class="col-xs-4 col-sm-4 col-md-1">
<div class="flw_circle_grey">
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-3">
<div class="grey_prog">
</div>
</div>
<label class="pull-left flw_text cst_text">Attach & Declaration</label>
<div class="col-xs-4 col-sm-4 col-md-1">
<div class="flw_circle_grey">
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-3">
<div class="grey_prog">
</div>
</div>
<label class="pull-left flw_text pay_text">Payment</label>
<div class="col-xs-4 col-sm-4 col-md-1">
<div class="flw_circle_grey">
</div>
</div>
</div>
</div>
</div>
My CSS Code
.flw_width{
width: 480px;
margin: 0px auto;
padding-top:45px;
padding-bottom: 60px;
}
.flw_text{
font-size: 13px;
color: #ced3d0;
font-family: 'Open Sans', sans-serif;
width: 0px;
white-space: nowrap;
margin-top: -35px;
margin-left: -45px;
border:0px;
}
.flw_text, .cst_text{
margin-left: -46px !important;
}
.pay_text{
padding-left:26px;
}
.flw_circle_grey{
background: url(../images/grey_Circle.jpg) no-repeat;
width: 20px;
height: 20px;
margin-left: -35px;
margin-top: -7px;
}
.flw_circle_green{
background: url(../images/green_Circle.jpg) no-repeat;
width: 20px;
height: 20px;
margin-top: -6px;
margin-left: 0px;
}
.grey_prog{
background-color: #ced3d0;
height: 6px;
margin-left: -24px;
border: 1px solid #bdbdbd;
}
.green_prog_text{
color: #84bd00;
}
.green_prog{
background-color: #84bd00;
height: 6px;
margin-left: -24px;
}
My current output was like this.
Here is the reference image. Kindly help me I was struggling like anything.
Please do the needful.

Answer 1

You have selected the column grid wrongly, I think For the class which are representing the font awesome circle (green dot) fa fa-circle flw_circle_green can be changed to single grid where you have defined a 4 column grid.
Try updating the four column grid to one column 1 column and use the