bootstrap 将响应式水平时间轴转换为垂直时间轴

Question

我试过像这样查找 tutorials/examples/codepens 但没有成功。请 link 任何我可能错过的。

我正在尝试将此图像制作成 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: "[=10=]A0"; 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 而不是图像。而且我刚刚创建了结构你需要修改这段代码。

bootstrap 将响应式水平时间轴转换为垂直时间轴

Responsive horizontal timeline into vertical timeline with bootstrap

html

css

timeline

twitter-bootstrap-3