I have a basic responsive design using [bootstrap.](http://getbootstrap.com/) I am simply trying give absolute positioning to an element in one viewport, and something else in all other view ports, but it's overriding all of the rules in other view ports. 

Here are the main rules.

```
 .start-today  {
    color:#fffeaf;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.3px;
    margin-bottom:20px;
    float: right;
    text-align: center;
    margin-right: 20px;
    margin-top:40px;
    text-shadow: 1px 1px 1px #000;
    -webkit-text-shadow: 1px 1px 1px #000;
    -moz-text-shadow: 1px 1px 1px #000;
}
.start-today a {
       color:#fffeaf;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.3px;
    text-shadow: 1px 1px 1px #000;
    -webkit-text-shadow: 1px 1px 1px #000;
    -moz-text-shadow: 1px 1px 1px #000;
    transition: color 0.5s ease;
}

```

Here are the rules in the smallest viewport that is overriding the main rule and all other view port rules.

```
  @media only screen and (min-width:320px) {

.start-today {
        color:#fffeaf;
        font-size: 14px;
        font-weight: bold;
        letter-spacing: 0.3px;
        text-align: center;
        position: absolute; bottom:100px; left:2px;
        }
        .start-today a {
            font-size:12px;
        }

}

```