Bootstrap timeline responsive layout issues - html

Question

I have been using a sample timeline built using Bootstrap, and so far it works reasonably well, but upon resizing some of the layout doesn't quite line up. I've customized the code so that all of the timeline items are on the right of the line itself, and now I'm having issues lining up the icons for each item and also the final icon at the end.
I apologize for the messy fiddle, but here is my fiddle:
http://jsfiddle.net/36yt7srz/
You can see that on the final circle at the bottom, when the window is small it lines up roughly in the middle of the timeline, but when the window is resized it is out of sync with that line. I could use some media queries but I felt that this would inevitably end up with a circle which still will be out of line at some window sizes.
I'm looking for a way to essentially get the circle to just follow the line.
Here is the HTML:
<!-- content -->
<div class="col-md-12 content page">
<!-- header icon -->
<div class="col-xs-3">
<img class="img-responsive" src="http://s21.postimg.org/s3hybqfwz/icon.jpg">
</div>
<!-- header text -->
<div class="col-xs-9 schedule-header-text">
<img class="img-responsive" src="http://s27.postimg.org/4y34y273z/text.jpg">
</div>
<!-- Timeline -->
<div class="col-xs-12">
<ul class="timeline">
<li class="timeline-inverted">
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>Date</h4>
</div>
<div class="tl-body">
<p>Content</p>
<p><small class="text-muted"><i class="fa fa-map-marker"></i> Location</small></p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>Date</h4>
</div>
<div class="tl-body">
<p>Content</p>
<p><small class="text-muted"><i class="fa fa-map-marker"></i> Location</small></p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="tl-circ-empty"></div>
</li>
</ul>
</div>
Here is the CSS:
/** timeline box structure **/
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 2px;
background-color: #504f4f;
left: 5%;
}
.timeline li {
margin-bottom: 25px;
position: relative;
}
.timeline li:before, .timeline li:after {
content: " ";
display: table;
}
.timeline li:after {
clear: both;
}
.timeline li:before, .timeline li:after {
content: " ";
display: table;
}
/** timeline panels **/
.timeline li .timeline-panel {
width: 90%;
float: left;
background: rgba(0,0,0,0.6);
padding: 10px;
position: relative;
top: 23px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.timeline li .timeline-panel.noarrow:before, .timeline li .timeline-panel.noarrow:after {
top:0;
right:0;
display: none;
border: 0;
}
.timeline li.timeline-inverted .timeline-panel {
float: right;
}
.timeline li.timeline-inverted .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline li.timeline-inverted .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
/** timeline circle icons **/
.timeline li .tl-circ {
position: absolute;
top: 23px;
left: 5%;
text-align: center;
background: url(../img/schedule-icon.png);
color: #fff;
width: 35px;
height: 35px;
margin-left: -13px;
z-index: 99999;
}
.timeline li .tl-circ-empty {
position: absolute;
top: 35px;
left: 46px;
text-align: center;
background: #434343;
width: 15px;
height: 15px;
margin-left: -13px;
border: 3px solid #434343;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
z-index: 99999;
}
/** timeline content **/
.tl-heading h4 {
margin: 0 0 10px 0;
color: #fafafa;
}
.tl-body p, .tl-body ul {
margin-bottom: 0;
color: #fafafa;
}
.tl-body > p + p {
margin-top: 5px;
}
/** media queries **/
#media (max-width: 991px) {
.timeline li .timeline-panel {
width: 90%;
}
}
#media (max-width: 700px) {
.page-header h1 { font-size: 1.8em; }
ul.timeline:before {
left: 40px;
}
ul.timeline li .timeline-panel {
width: calc(100% - 90px);
width: -moz-calc(100% - 90px);
width: -webkit-calc(100% - 90px);
}
ul.timeline li .tl-circ {
top: 22px;
left: 22px;
margin-left: 0;
}
ul.timeline > li > .timeline-panel {
float: right;
}
ul.timeline > li > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
ul.timeline > li > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
}
.schedule-header-text {
padding-top: 12px;
}
.schedule-header-text img {
max-width: 75%;
}
.content.page {
padding: 5%;
}

Answer 1

I don't know if I understood you correctly.
But here is what I did to make it align (I changed the color for visibility)
.timeline li .tl-circ-empty {
position: absolute;
top: 35px;
left: 5%;
text-align: center;
background: red;
width: 15px;
height: 15px;
margin-left: -7.5px;
border: 3px solid red;
border-radius: 50%;
z-index: 99999;
}
And I added the following
#media (max-width: 700px){
ul.timeline li .tl-circ-empty {
left: 22px;
margin-left: 10px;
}
}
I am in a rush to go somewhere. Tell me if this didn't solve your question.
EDIT1
PS.Like I mentioned above, I didn't have enough time to read through your css completely. I focused on the .tl-circ-emptyclass to create a fix without touching the whole css structure to minify the damage.
EDIT2
I remember dealing with making Vertical Timelines myself.
I learned a lot following this.