Vertical line between icons by Bootstrap columns (twice)

https://stackoverflow.com/a/38421672/6263942

by Gleb Kemarsky

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container timeline">
  <div class="row">
    <div class="col-sm-6">
      <div class="row">
        <div class="col-xs-12">
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          <div class="row">
            <div class="col-xs-6 col-sm-12 col-md-6"><img src="https://via.placeholder.com/900x300/c69/f9c/?text=First" alt=""></div>
            <div class="col-xs-6 col-sm-12 col-md-6"><img src="https://via.placeholder.com/900x300/9c6/cf9/?text=Second" alt=""></div>
          </div>
        </div>
        <div class="col-xs-12">
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
        </div>
        <div class="col-xs-12">
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
        </div>
        <div...

CSS

body {
  background: lightgrey; 
}

.timeline {
  background: white; 
  counter-reset: section;
  margin: 20px auto;
  padding-left: 70px;
  padding-top: 50px;
}

.timeline .col-xs-12 {
  border-left: solid 4px orange;
  padding-bottom: 80px;
  padding-left: 40px;
  padding-right: 60px;
}

.timeline .col-xs-12:before {
  /* counter */
  counter-increment: section;
  content: counter(section);
  /* position */
  position: absolute;
  left: -22px; /* = (width + border-left) / 2 */
  top: -30px;
  /* form & size */
  border-radius: 50%;
  height: 40px;
  width: 40px;
  /* colors & text */
  background: orange;
  color: white;
  font-size: 22px;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
}

/* images */
.timeline img {
  margin-top: 20px;
  width: 100%;
}
@media (max-width: 480px) {
  .col-xs-6 {
    width: 100% !important;
  }
}