Responsive Horizontal Timeline Into Vertical Timeline With Bootstrap

I've tried looking up tutorials/examples/codepens like this but wasn't successful. Please link to any I might have missed. I'm trying to make this image into html/css/Bootstrap, wh

Solution 1:

Try This

.Img1{
 margin-top:30px;
 position:relative;
}
.Img1:before{
      content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 21px;
    width: 1px;
    background: red;
    margin: 0 auto;
    top: -26px;
}
.Img1img{width:100%;border-radius:50%;width:100px;
  height:100px;}
  
  .Text2{
  width:200px;
}

.Img2{
 margin-bottom:30px;
 position:relative;
}
.Img2:before{
      content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 21px;
    width: 1px;
    background: red;
    margin: 0 auto;
    bottom: -26px;
}
.Img2img{width:100%;border-radius:50%;width:100px;
  height:100px;}
.container {
    float: left;
    margin: 010px;
    text-align:center;
}

@media screen and (max-width: 767px) {
  .container {
    float: none;
    clear: both;
    margin:20px0;
}
.container:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.container{ display: inline-block;}
html[xmlns].container { display: block;}
* html.container{ height: 1%;}
.container {display: block}
.Text1 {
    float: right;
    margin:30px0;
}
.Img1 {
    float: left;
    margin-top:0;
    
}


.Text2 {
    float: left;
    margin:30px0;
}
.Img2 {
    float: right;
    margin-bottom:30px;
}
.wrapper{width:60%;margin:0 auto;}
.Img2:before,.Img1:before{display:none;}
}

<divclass="wrapper"><divclass="container"><divclass="Text1">
Idea formed
</div><divclass="Img1"><imgsrc="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png"></div></div><divclass="container"><divclass="Img2"><imgsrc="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png"></div><divclass="Text2">
Private funding for prototype raise
</div></div></div>

Right now I have used image but you can create a div instead of image. And I have just created structure you need to modify this code.