Как я могу создать пользовательский интерфейс с вертикальной шкалой времени, где на рабочем столе он отображается в виде шкалы времени в середине и в окнах событий с обеих сторон. На меньшем экране мобильного устройства шкала времени слева и все поля событий справа.

Хорошо использовать JQuery в сочетании с адаптивными классами, просто нужно показать все блоки событий, поэтому скрывать альтернативные блоки с помощью xs-hidden не получится.

JS Fiddle: http://jsfiddle.net/n82ek/2/

Уменьшите размер окна результатов, чтобы увидеть отзывчивое поведение.

Что должно произойти? Переместите панель влево для отображения xs. Приятно иметь: также добавьте timelineDot на линии рядом с полем.

Пожалуйста, обратитесь к образцу шаблона пользовательского интерфейса временной шкалы, приложенному .... и Спасибо!

Текущий 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, 0, 0.796875) 0px 0px 2px;
    -webkit-box-shadow: rgba(0, 0, 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;
}