Виталий

1. Параметр ID должен быть уникальным на всю страницу
2. Используйте JS - https://www.paulirish.com/2009/random-hex-color-co... и циклом для каждой итерации добавлять style для TD, который вложенный в TR с классом duplicate

Прочитайте и вникните в disply: table-cell , и vertical-align: middle

1. Вычислить центр из width() и height() table
2. Сделать table - reletive
3. Переместить квадраты, придав им position - absolute и координаты центра в left / top, задать z-index, если надо позиционировани их по оси Z
4. ну и перемещать их собственно через animation ( если jquery используется) или transition

Весь вопрос в том, как оно будет на мобилке и тд.
Никто не против сделать даже так:

<div class="row">
    <div class="col-xs-3"><div class="logo">Some logo here</div></div>
    <div class="col-xs-9">
        <div class="row">
            <div class="col-xs-12">
                <div class="first-line"></div>
            </div>
            <div class="col-xs-12">
                <div class="second-line"></div>
            </div>
        </div>
    </div>
</div>

(прям что бы совсем разжевали все, вот что бы не знающему ничего стало понятно)

Ни что, а сколько раз
Я бы посмотрел какой нить курс , например от itvdn или Специалист.
Потом почитывал бы книгу. У меня Флэнаган - карманный справочник. ( там где то и написано, что это нормально что не понятно будет с первого раза, но с каждый новым прочтение вы все больше будете знать)
Знания надо постоянно повторят. А умнее заключается не в том, чтобы знать всё, а в том, чтобы знать где найти решение.

Все упирает в ТЗ.
- Если по нему сказано что дизайн будет по сетке BS 4 , потому что сроки горят, а надо вчера. То надо делать так.
- Если по ТЗ сказано, что дизайн должен быть вау, и побоку на сетку. Тогда в том, в чем есть. А что потом будет делать с этим верстальщик - юзать BS или писать свою сетку / стили и тд - дело вторичное.
Готовые сетки - это не стандарт, а просто оптимизацию процесса, и как , следствие - времени и денег клиента.

JS`ом меняется width и height его , ничего сложного

Как оно должно выглядеть на 768, 480 и 320.

Как дизайнер задумает .. мб оно в кружек свернётся ;)

понятно что на 768 5 штук уже не уместятся

например, 3 +2 в 2 ряда. inline-block + text-center

Я б не мешал сетку. Сделать col-md-3* 4 штуки для данного вида. и уже внутри col-md-4 сделать 2 колонки, скорей всего через display: table-cell, одна для контента, вторая для стрелки

Если вложенность не требуется

<div id="block_black"></div>
<div id="block_blue" style="width: 80%; margin: -100px auto 0 auto;"></div>

* если черный - это шапка сайте , то лучше всего background image и padding-top

- нужно было изначально уточнить детали проекта и отказаться от проекта если не можете исполнить
- купить монитор с 1900
- делать в масштабе ( думаю будет тот еще изврат)

https://habrahabr.ru/post/256109/

Это будет один из вариантов решения задачи

на CSS 3 , методом transform
codepen.io/wifeo/pen/qzwkb

что то внутри выпирает, попробуйте поудалять внутренние ноды или дать ссылку, а то мой уровень экстрасенса слабоват

По JS на youtube есть курс от Sorax
Есть более полные курсы по JS от ITVDN и Специалист .. остальные найденные - в меня не зашли
Ну и основные книги Фленагана , Cтефанов
* объем знаний конечно хорошо, но быстрее и лучше имея минимальный опыт - ходить по собеседованиям и устроится куда то, так быстрее получится получить нужные опыт и практику