Html 如何利用快速响应的网站

我正在尝试使用Bootstrap3.0.3创建一个基本的响应性网站。 我画了一条垂直向下的时间线，当窗口很大时，它在时间线的两侧都有图标，否则图标会对齐，时间线标记会收缩。 这样地： 大型时：

小的时候：

目前，图标和文字的行为正常，但我必须画线来说明我的观点。实际上，我用|和-表示线条，它们随着大小的调整而出现和消失。我的问题是，我如何才能画出时间线的实际线条，以便它们能够正常工作。是否有一些向量或形状的绘图，我可以在网格元素内做，或者我只需要在其他地方画线，把它作为背景图像，并改变窗口大小

当前代码：

<div class="row">
    <h5>WEEK 1</h5>  
</div>
<div class ="row">
    <div class = "col-xs-12 col-sm-2">                
        <a href="#" class="btn btn-default" rel="popover" data-content="output" data-placement="right" data-trigger="click"><img src="Doc_icon.jpg"></a>
        <p><a href="#" class="btn btn-default" rel="popover" data-content="output" data-placement="right" data-trigger="click"><img src="Drawing_icon.jpg"></a></p>
    </div>
    <div class = "col-sm-1">
        <h3 class="hidden-xs">||</h3>
    </div>
    <div class = "col-xs-6 col-sm-6">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">This weeks project tittle</h3>
            </div>
            <div class="panel-body">
                <p>Project description: ba nananananana nananananana nananananana nananana nana batman!</p>
            </div>
        </div>
    </div>            
    <div class = "col-xs-1 col-sm-3">
    </div>
    </div>
    <div class = "row">
        <h3 class="hidden-sm hidden-md hidden-lg">---</h3>
        <h3 class="hidden-xs">===</h3>
    </div> 

第一周

||
本周项目标题
项目描述：芭娜娜娜娜娜娜娜娜娜娜娜娜娜娜娜娜娜蝙蝠侠

---
===

以我有限的经验，我会坚持使用引导框架和响应行来获得您所需的设计。我在下面用一个基础练习快速编了一把小提琴

基本步骤如下：-

使用以下代码将

边框顶部底部
css类添加到行中

.border top-bottom{边框顶部：2px纯红；边框底部：2px纯红；}

将

border right

css类添加到左侧列

。右边框{
右边框：2倍纯红；
填充：10px
}

从

行

和

面板信息

.panel info{margin bottom:-1px；}

.row{padding:0px；}

然后你可以调整填充物，从那里看/摸

希望这有帮助。我不是CSS专家，所以我确信有一个更有用的答案，但这就是我将如何开始的

---

干杯

回答得很酷。我的第一个想法是使用JavaScript检查浏览器的宽度。我喜欢CSS唯一的答案。适用于可能患有JS残疾的人。