Sliding left-side tab

Moves large tab to a smaller inline tab for smaller width viewports.

by Virtual

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="container">
     <h1>my page</h1>

</div> <a href="#snapshot" class="box-transition" title="Jump to photos shared by students" id="pagetab">Artboard
<i class="fa fa-caret-right"><span class="sr-only">View</span></i></a>

<div class="container">
     <h3>my page</h3>

    <p>have some lorem</p>
</div>

CSS

#pagetab {
    font-weight: 600;
    background: #ffcb05;
    cursor: pointer;
    position: absolute;
    width: 80px;
    height: 120px;
    padding: 10px;
    z-index: 2;
    left: 0;
    background-position: right 0;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    text-transform: uppercase;
    color: #585858;
    font-size: 10px;
    text-decoration: none;
    text-align: center;
    -webkit-border-top-left-radius: 5px !important;
    -webkit-border-top-right-radius: 5px !important;
    -moz-border-radius-topleft: 5px !important;
    -moz-border-radius-topright: 5px !important;
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
}
#pagetab i {
    font-size:24px;
}
.box-transition {
    transition: all 0.7s linear;
    -webkit-transition: all 0.7s linear;
    -moz-transition: all 0.7s linear;
    -o-transition: all 0.7s linear;
    -ms-transition: all 0.7s linear;
}
@media (max-width: 720px) {
    #pagetab {
        height:70px;
        left:-50px;
        width: 100px;
    }
    #pagetab i {
        display:inline;
        font-size:12px;
    }
}