См. детали. Как при наведении на 1 div изменять другой?
Потому что "~" видит только тех сиблингов, которые находятся ниже первого. В CSS нет возможности выбрать сиблинга, стоящего выше, но есть различные лайфхаки. Хотя проще прибегнуть к js.
Была такая же проблема. Мне посоветовали перевернуть в разметке блоки (т.е. 1 2 3 заменить на 3 2 1), а через flex-direction: column-reverse отобразить их в нормальном виде. Тогда все сработает. В вашем случае для этого способа придется сделать отдельный контейнер. Тыц