Hide and show depending on screen size bootstrap 3 classes

Question

for some this may seem very easy, and from what I have written I seems like it would do what I want it to, but sadly that isn't the case I have two images each image will be shown depending on the screen size, so for the first one in the HTML I have placed hidden-md, hidden-sm, hidden-xs which would give me the impression It will only show on large screens, the second one I only want to be visible on the tablets/mobiles so I have assigned the visible-sm, visible-md and hidden-lg but when I re-size the browser the first image doesn't dis-appear when I minimize down to a tablet size, however it does dis-appear when minimizing the browser down to a mobile device size, can anyone spot what I've done wrong?

 <a class="navbar-brand hidden-md, hidden-sm, hidden-xs" style=" background-image: url('/Content/Images/FirstImage.png'); background-repeat: no-repeat;" href='@Url.Action("Index", "Home")'></a>   <a class="navbar-brand hidden-lg, visible-sm, visible-md" style=" background-image: url('/Content/Images/SecondImage.png'); background-repeat: no-repeat;" href='@Url.Action("Index", "Home")'></a> 

Answer 1

You have commas in your class. Remove these, and it should work as you expect.

<a class="navbar-brand hidden-md hidden-sm hidden-xs" style=" background-image: url('/Content/Images/FirstImage.png'); background-repeat: no-repeat;" href='@Url.Action("Index", "Home")'></a>  <a class="navbar-brand hidden-lg visible-sm visible-md" style=" background-image: url('/Content/Images/SecondImage.png'); background-repeat: no-repeat;" href='@Url.Action("Index", "Home")'></a>