I've got an image that is displayed when viewing the website on a computer; however, I want it to be hidden when the site is viewed on a mobile device. I've just used the 'display: none;' CSS but for some reason it's not working. 

HTML:

```
<div class="col-sm-7 col-sm-offset-1">
      <img src="./images/testing.jpg" alt="">
</div>

```

CSS:

```
.col-sm-7 {
    display:none;
}

```

Thank you.