iBird Rose

из за
.block-sid {width: 247px;}

зачем тебе тут вообще колонки бутстрапа?

дивами на flex. при адаптации сможешь и переносить друг под друга и через order менять местами блоки

у элемента #footer убери background

Пробовал сделать подобное с использованием flexbox

И? что именно не получилось?

что там сложного то? там просто картинка и блоки. использованы 2 плагина:
https://daneden.github.io/animate.css/
https://wowjs.uk/

Не прижатый: https://jsfiddle.net/mke0wfgv/


Прижатый: https://jsfiddle.net/mke0wfgv/1/

к примеру поставить обычный https://developer.snapappointments.com/bootstrap-s...
а клик на крестик уже обработать самостоятельно

label должен быть либо сиблингом, либо дочерним элементом. В твоем случае никак. Но можешь внутри сделать к примеру div и его уже стилизовать как label. и ему уже менять background
типа так:

<label>
    <input type="radio" id="radioButton value="radioitem">
    <div class="taskradi"></div>
</label>

.input:checked ~ .taskradio {
    background: rgba(8, 81, 161, 0.70);
    color: #fff;
}

Это символы юникода: https://www.compart.com/en/unicode/block/U+1D400

ошибся в названии класса "container-fluEd". должно быть "container-fluid"