Html 通过引导将响应水平时间线转换为垂直时间线

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

我正在尝试将此图像转换为html/css/Bootstrap，这应该不会太糟糕，但垂直线可能很难（可以使用此建议）：

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

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

非常感谢你的帮助！基本代码笔将不胜感激

试试这个

.Img1{
边缘顶部：30px；
位置：相对位置；
}
.Img1：之前{
内容：“；
位置：绝对位置；
左：0；
右：0；
高度：21px；
宽度：1px；
背景：红色；
保证金：0自动；
顶部：-26px；
}
.Img1 img{宽度：100%；边界半径：50%；宽度：100px；
高度：100px；}
.Text2{
宽度：200px；
}
.Img2{
边缘底部：30px；
位置：相对位置；
}
.Img2：之前{
内容：“；
位置：绝对位置；
左：0；
右：0；
高度：21px；
宽度：1px；
背景：红色；
保证金：0自动；
底部：-26px；
}
.Img2 img{宽度：100%；边界半径：50%；宽度：100px；
高度：100px；}
.集装箱{
浮动：左；
利润率：0.10px；
文本对齐：居中；
}
@媒体屏幕和屏幕（最大宽度：767px）{
.集装箱{
浮动：无；
明确：两者皆有；
利润率：20px0；
}
.container:在{内容：“\00A0”；显示：块；清除：两者；可见性：隐藏；行高度：0；高度：0；}
.container{显示：内联块；}
html[xmlns]。容器{display:block；}
*容器{高度：1%；}
.container{display:block}
.Text1{
浮动：对；
利润率：30px0；
}
.Img1{
浮动：左；
边际上限：0；
}
.Text2{
浮动：左；
利润率：30px0；
}
.Img2{
浮动：对；
边缘底部：30px；
}
.wrapper{宽度：60%；边距：0自动；}
.Img2:before、.Img1:before{display:none；}
}

思想形成
私人资金用于原型融资

试试这个

.Img1{
边缘顶部：30px；
位置：相对位置；
}
.Img1：之前{
内容：“；
位置：绝对位置；
左：0；
右：0；
高度：21px；
宽度：1px；
背景：红色；
保证金：0自动；
顶部：-26px；
}
.Img1 img{宽度：100%；边界半径：50%；宽度：100px；
高度：100px；}
.Text2{
宽度：200px；
}
.Img2{
边缘底部：30px；
位置：相对位置；
}
.Img2：之前{
内容：“；
位置：绝对位置；
左：0；
右：0；
高度：21px；
宽度：1px；
背景：红色；
保证金：0自动；
底部：-26px；
}
.Img2 img{宽度：100%；边界半径：50%；宽度：100px；
高度：100px；}
.集装箱{
浮动：左；
利润率：0.10px；
文本对齐：居中；
}
@媒体屏幕和屏幕（最大宽度：767px）{
.集装箱{
浮动：无；
明确：两者皆有；
利润率：20px0；
}
.container:在{内容：“\00A0”；显示：块；清除：两者；可见性：隐藏；行高度：0；高度：0；}
.container{显示：内联块；}
html[xmlns]。容器{display:block；}
*容器{高度：1%；}
.container{display:block}
.Text1{
浮动：对；
利润率：30px0；
}
.Img1{
浮动：左；
边际上限：0；
}
.Text2{
浮动：左；
利润率：30px0；
}
.Img2{
浮动：对；
边缘底部：30px；
}
.wrapper{宽度：60%；边距：0自动；}
.Img2:before、.Img1:before{display:none；}
}

思想形成
私人资金用于原型融资