CSS - «Обратное» перемещение элементов - как сохранить их внизу?

В настоящее время я столкнулся с интересной проблемой CSS, по которой я не смог найти ничего связанного с этим в сети. Я знаю, что это должно быть решаемо, возможно, вы сломаете орех .. (?)

Следующая проблема: Мне нужно отобразить несколько значков перед изображением, расположенным в левом нижнем углу. Поскольку количество значков может варьироваться, значки располагаются рядом друг с другом (максимум три на строку - определяется свойствами ширины).

Вот мой HTML-код (div, содержащий значки, располагается над изображением абсолютно) :

И соответствующий CSS:

.labels { position: absolute; bottom: 20px; left: 5px; z-index: 50; }
.labels ul { display: block; min-height: 20px; overflow: auto; width:210px; }
.labels ul li { float: left; list-style-type: none; margin: 0 5px 3px 0; }

Чтобы вы получили представление о том, как это выглядит и какова цель, я нацарапал это для вас: см. здесь (мне не разрешено загружать изображения ..): текст ссылки

Как вы можете видеть, значки смещены влево, но, очевидно, начинаются сверху. Это нехорошо, потому что я хочу, чтобы плавающий обратный ход начинался снизу слева, заполняя ширину ul-элемента и продолжал плавание на следующей строке вверх.

Есть идеи, как решить эту проблему? Любая помощь приветствуется !!