<section class="timeline">
        <h1 style="margin-bottom:100px;">Hello world</h1>
        <div class="container">
            <div class="row">
                <div class="line"></div>
                <div class="col-sm-5 col-xs-8 timeline-nested timeline-nested-left">
                    <div class="heart">
                        <i class="fa fa-heart"></i>
                    </div>
                    <h2>How we met<span>Jan 16, 2013</span></h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris volutpat dui non justo scelerisque interdum. Mauris cursus gravida efficitur. Aliquam viverra semper sodales. Cras sed scelerisque orci. Vivamus vitae nulla quis justo suscipit interdum. Suspendisse potenti. Quisque felis est, blandit sed laoreet quis.</p>
                </div>
                <div class="col-sm-5 col-xs-8 timeline-nested timeline-nested-right">
                    <div class="heart">
                        <i class="fa fa-heart"></i>
                    </div>
                    <h2>The first date <span>Jan 16, 2013</span></h2>
                    <div class="col-xs-12">
                        <img class="img-responsive" src="http://store1.up-00.com/2016-09/1473956144222.jpg" alt="Alternate Text" />
                    </div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris volutpat dui non justo scelerisque interdum. Mauris cursus gravida efficitur. Aliquam viverra semper sodales. Cras sed scelerisque orci. Vivamus vitae nulla quis justo suscipit interdum. Suspendisse potenti. Quisque felis est, blandit sed laoreet quis.</p>
                </div>
                <div class="col-sm-5 col-xs-8 timeline-nested timeline-nested-left">
                    <div class="heart">
                        <i class="fa fa-heart"></i>
                    </div>
                    <h2>We are Engaged</h2>
                    <div class="col-xs-12">
                        <div class="col-xs-6">
                            <img class="img-responsive" src="http://store1.up-00.com/2016-09/147395614433.jpg" alt="Alternate Text" />
                        </div>
                        <div class="col-xs-6">
                            <img class="img-responsive" src="http://store1.up-00.com/2016-09/1473956144222.jpg" alt="Alternate Text" />
                        </div>
                    </div>
                </div>
                <div class="col-sm-5 col-xs-8 timeline-nested timeline-nested-right">
                    <div class="heart">
                        <i class="fa fa-heart"></i>
                    </div>
                    <h2>Best Moments <span>Jan 16, 2013</span></h2>
                    <div class="col-lg-12">
                        <iframe width="100%" height="315" src="https://www.youtube.com/embed/zFr7mKhcrOA?list=RDT2PWatPAzag" frameborder="0"></iframe>
                    </div>
                </div>
                <div class="col-sm-5 col-xs-8 timeline-nested timeline-nested-left">
                    <div class="heart">
                        <i class="fa fa-heart"></i>
                    </div>
                    <h2>Getting married <span>Jan 16, 2013</span></h2>
                    <div class="col-lg-12">
                        <img class="img-responsive" src="http://store1.up-00.com/2016-09/147395614454.png" alt="Alternate Text" />
                    </div>
                </div>

            </div>
        </div>
    </section>

*{
    margin:0;
    padding:0;
}
h1,h2,h3,h4,h5,h6{
    margin:0;
}
.timeline {
    width: 100%;
    padding: 50px 0;
    background-image: url("http://store1.up-00.com/2016-09/147395614271.jpg");
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}
.timeline h1{
    text-align:center;
    color:white;
}
.timeline .row{
    padding:50px 0;
    position:relative;
    overflow: hidden;
}
.timeline .container .line{
    position:absolute;
    width:2px;
    top:0;
    bottom:0;
    left:50%;
    margin-left:-1px;
    background-color:#ffffff;
}
.timeline-nested{
    padding:20px 20px;
    background-color:white;
    position:relative;
    margin-bottom:50px;
    margin-left:20px;
}
.timeline-nested div[class^="col"]{
    padding:0;
}
.timeline-nested:after{
    position: absolute;
    top: 27px;
    right: -14px;
    display: inline-block;
    border-top: 14px solid transparent;
    border-left: 14px solid white;
    border-right: 0 solid white;
    border-bottom: 14px solid transparent;
    content: " ";
    z-index:50;
}
.timeline .timeline-nested .heart{
    width:35px;
    height:35px;
    background-color:black;
    border-radius:50%;
    position:absolute;
    top:27px;
    right:-19.5%;
}
.timeline .timeline-nested .heart i{
    font-size:20px;
    color:red;
    position:absolute;
    top:27.5%;
    left:22%;
}
.timeline-nested h2{
    font-size: 35px;
    letter-spacing: 2px;
    font-family: Consolas;
    padding-bottom: 20px;
    color: #242424;
    position: relative;
    text-transform: capitalize;
}
.timeline-nested h2 span{
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    position: absolute;
    top: 30px;
    left: 35%;
    color: #ff3297;
}
.timeline-nested p{
    font-size:16px;
    font-family:Consolas;
}
.timeline-nested-left{
    margin-top:50px;
    float:left;
    clear:left;
}
.timeline-nested-right{
    background-color:white;
    float: right;
    clear: right;
    margin-left:0;
    margin-right:20px;
    margin-top:150px;
}
.timeline .timeline-nested-right .heart{left:-19.5%;}
.timeline-nested-right::after{
    position: absolute;
    top: 27px;
    left: -14px;
    right: auto;
    display: inline-block;
    border-top: 14px solid transparent;
    border-left: 14px solid #ffffff;
    border-right: 0 solid #ffffff;
    border-bottom: 14px solid transparent;
    content: "";
    border-left-width: 0;
    border-right-width: 14px;
}
@media(max-width:768px) {
    .timeline .container .line{
        left:20px;
    }
    .timeline-nested{
        margin-left:80px;
        float:left;
        margin-right:0;
    }
    .timeline-nested:after{
        position: absolute;
        top: 27px;
        left: -14px;
        right: auto;
        display: inline-block;
        border-top: 14px solid transparent;
        border-left: 14px solid #ffffff;
        border-right: 0 solid #ffffff;
        border-bottom: 14px solid transparent;
        content: "";
        border-left-width: 0;
        border-right-width: 14px;
    }
    .timeline .timeline-nested .heart{
        left:-78px !important;
        right:auto;
    }
}
@media (min-width: 768px){
    
}
@media (min-width: 992px){
}
@media (min-width: 1200px){
}