如何创建一个具有垂直时间轴栏的UI，在桌面上它显示为中间的时间轴栏和两侧的事件框。在较小的移动屏幕上，左侧的时间轴栏和右侧的所有事件框。
使用JQuery结合响应类是好的，只需要显示所有的事件框，所以隐藏备用框与xs-hidden将不会。
JS小提琴：http://jsfiddle.net/n82ek/2/
缩小结果窗口的大小以查看响应行为。
需要做什么？移动左侧的栏以显示xs
很好有：也添加时间线在框旁边排队。
请参考示例时间轴ui模式图像附加….和谢谢！
当前HTML：
<div class="container">
<div class="timelineBar"></div>
<div class="timelineDot"></div>
<div class="row">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
<div class="shadowBox">right</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="shadowBox">left</div>
</div>
<div class="col-sm-6">
</div>
</div>
<div class="row">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
<div class="shadowBox">right</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="shadowBox">left</div>
</div>
<div class="col-sm-6">
</div>
</div>
</div>
当前CSS：
@import url('https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css');
.timelineBar {
width: 2px;
background-color: #BDBDBD;
display: inline-block;
position: absolute;
height: 100%;
left: 50%;
margin-left: 10px;
margin-right: 10px;
}
.shadowBox {
Box-shadow: rgba(0,0.796875) 0px 0px 2px;
-webkit-Box-shadow: rgba(0,0.796875) 0px 0px 2px;
border:2px solid white;
border-radius: 10px;
margin: 10px;
background-color: #FFFFFF;
}
.timelineDot{
width: 10px;
height: 10px;
background-color: #BDBDBD;
opacity: 1;
display: inline-block;
position: absolute;
left: 50%;
top: 15px;
margin-left: 6px;
border-radius: 10px;
}
解决方法
“时间轴(响应)”代码段：
这看起来非常，非常接近你的例子显示。下面链接的引导程序片段涵盖了您正在寻找的所有基础。我一直在考虑自己，与你有同样的要求(特别是响应)。这种变形在屏幕尺寸和设备之间。
你可以分叉并使用它作为您的具体期望的一个伟大的起点：
> http://bootsnipp.com/snippets/featured/timeline-responsive
这里是我为你采取的两个截图…宽和薄：