使用引导程序将响应的水平时间线转换为垂直时间线

Question

我试过像这样查找教程/示例/代码笔，但没有成功。请链接到我可能错过的任何内容。

我正在尝试将此图像制作成 html/css/Bootstrap，这应该不会那么糟糕，除了垂直线可能很困难（可以对此提出建议）：

然后，当您更改浏览器的大小或在智能手机上纵向查看时，我希望它看起来更像：

但我不知道该怎么做，这样在水平时间轴上相互对应的圆圈和标题也在垂直时间轴上。

非常感谢您的帮助！基本的代码笔将非常感谢！

Answer 1

试试这个

.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;
}
.Img1 img{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;
}
.Img2 img{width:100%;border-radius:50%;width:100px;
  height:100px;}
.container {
    float: left;
    margin: 0 10px;
    text-align:center;
}

@media screen and (max-width: 767px) {
  .container {
    float: none;
    clear: both;
    margin:20px 0;
}
.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:30px 0;
}
.Img1 {
    float: left;
    margin-top:0;
    
}


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

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

现在我使用了图像，但您可以创建一个 div 来代替图像。我刚刚创建了你需要修改此代码的结构。