Как лучше реализовать адаптивность такого блока?
У вас тут явно не 22%, а 4 блока с разной шириной. Флекс необязателен, обычный float будет более чем достаточен. Я делал 4 колонки с определенными классами (col-3, col-2 и т.п.) и на 768px (стандартный брейкпойнт для планшетов) превращал все эти колонки в одну путем растягивания их на 100% ширины.
не знаю использовали ли вы Bootstrap ?
им гораздо проще стилизовать адптивную верстку
www.joomla-study.ru/lessons/adaptivnaya-setka-boot...