Фиксированный нумерованный сайдбар слева с ссылками

Данный код выводит нумерованный сайдбар слева с ссылками, код автоматически скрывается на разрешении 1200px, чтобы не закрывать обзор сайта:

/*--------------------------
--  Pages
--------------------------*/
.left-menu-pages {
    font-size: 16px;
    font-weight: 700;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: auto;
    background: #fff;
    border-right: 1px solid #03b0ff;
    text-align: center;
    z-index: 9999;
    padding: 20px 5px 0;
}

.left-menu-pages ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.left-menu-pages a {
    display: block;
    margin: 0 auto 10px;
    background-color: #fff;
    color: #03b0ff;
    border: 1px solid #03b0ff;
    text-decoration: none;
    width: 26px;
    height: 26px;
    overflow: hidden;
    transition: all .4s;
    line-height: 27px;
    border-radius: 50%;
}

.left-menu-pages li a:hover {
    border: 1px solid #03b0ff;
    background: #03b0ff;
    color: #fff;
    transform: scale(1.2);
}

.left-menu-pages li a.active {
    opacity: 1;
    border: 1px solid #03b0ff;
    background: #03b0ff;
    color: #fff !important;
}

@media screen and (max-width: 1200px) {
    .left-menu-pages {
        display: none;
    }
}
/*--------------------------
--  Pages end
--------------------------*/

<div class="left-menu-pages">
    <ul>
        <li><a class="active" href="index.html">1</a></li>
        <li><a href="index-2.html">2</a></li>
    </ul>
</div>