i10dev

через js добавляешь/удаляешь класс
а в css добавляешь и описываешь класс с animation: имя - @keyframes
а сам @keyframes описываешь отдельно

---
херова туча /или a/или что те нужно


и уже внутри каждому элементу даешь position: absolute и позиционируешь как те ннннадо, челез left/top/right/bottom.
или как вариант позиционируешь всех в центре круга и через tranform: translate(x,y) расставляешь каждый элемент куда ннадо

ты намудрил с BS .col-**-*.
Блоки адаптируются правильно. Проблема в img. img имеет постоянный размер(ш150px и в 150px), при маленьком разрешении у тебя колонки имеют ширину больше чем 150 пикселей, отсюда и появляется пустое пространство.
например при ширине экрана в 600 пикселей, каждый блок имеет ширину в 265 пикселей, а img имеет ширину в 150. вот те и пустое пространство в 300 пикселей