title: Hide and show depending on screen size bootstrap 3 classes
body: <p>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?</p>
  
  <pre><code> &lt;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")'&gt;&lt;/a&gt;
  
   &lt;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")'&gt;&lt;/a&gt;
  </code></pre>