Сделать так, что бы элементы скрывались симетрично

<div class="roll">
        <ul>
            <li class = "clr-green"><span>0</span></li>
            <li class = "clr-silver"><span>11</span></li>
            <li class = "clr-red"><span>5</span></li>
            <li class = "clr-silver"><span>10</span></li>
            <li class = "clr-red"><span>6</span></li>
            <li class = "clr-silver"><span>9</span></li>
            <li class = "clr-red"><span>7</span></li>
            <li class = "clr-silver winner"><span>8</span></li>
            <li class = "clr-red"><span>1</span></li>
            <li class = "clr-silver"><span>14</span></li>
            <li class = "clr-red"><span>2</span></li>
            <li class = "clr-silver"><span>13</span></li>
            <li class = "clr-red"><span>3</span></li>
            <li class = "clr-silver"><span>12</span></li>
            <li class = "clr-red"><span>4</span></li>
        </ul>
        <img class = "center-hr" src="img/v-hr.png" alt="">
    </div>

есть кусок HTML - по типу рулетки. по средине есть картинка, она постоянно отцентрирована и она будет определять победную ячейку(в данном примере это восьмерка и она по средине и ее определяет картика по типу вертикально полосы), надо сделать так что бы при сужении монитора, ячейки с цифрами симметрично прятались за границы родителя, и не терялся смысл увиденного. Вот выпала восьмерка, потом мы сузили окно, и все осталось на месте, только другие элементы которые не влязят в родитель спрятались.Если можно то напишите пожалуйста решение. Очень много вариантов но эфект не тот что хочу.