Добрый день, есть интерактивный элемент на сайте
При выборе маленького блока, меняется содержимое большого. Нужно что бы маленький активный соединялся с большим линией, как это реализовать даже представить не могу.
Сам функционал реализован с помощью bootstrap tab и имеет следующую структуру
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>
Где tab-content это содержимое большого блока.
Есть еще одна проблема, при различных разрешениях экрана количество колонок меняется, на высоком по 4 колонки, на ноутбуках по 3, ниже уже не интересует, там все в колонку.
Может есть какие то плагины для реализации, или подскажите как искать, по запросам соединить линиями блоки div ни чего не выдает.
