Process timeline with columns in Bootstrap

I want the design like in the image, I did the vertical line with border of the columns, but how to connect the image elements with the vertical line and to be responsive. I have tried with :after and :before, but it's not good.

HTML
    <section id="timeline">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 left">
                    <img src="image.png" class="img-responsive center-block" />
                </div>
                <div class="col-sm-6 right">
                     <p>Text</p>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-sm-6 left">
                    <p>Text</p>
                </div>
                <div class="col-sm-6 right">
                    <img src="image.png" class="img-responsive center-block" />
                </div>
            </div>
        </div>
   </div>

CSS
    .left { border-right:4px solid #000; }
    .right{ border-left:4px solid #000; }

Design image