title: Twitter Bootstrap - How to change css class based on @media defined widths
body: <p>This is my first question here, but I would just like to say this website has helped me on countless times over my years. I guess I've got to the stage where I have my own questions to ask!</p>
  
  <p>Sorry if the question isn't clear, I'll try to elaborate: I have assigned a transition to some of my elements, so that when they are hovered over they rise upwards (ie; <code>.example:hover {margin-top: -25px}</code> ).</p>
  
  <p>You can see where I have applied this on <a href="http://edmundreed.co.uk/bootstrap/" rel="noreferrer">this</a> page.</p>
  
  <p>Hover over the elements underneath the "Coming Soon" alert box (ie; "Pixel Perfect Designs", "Beautifully Clean Code" &amp; "Over 5 years Experience").</p>
  
  <p>All works fine, however you'll notice that when the browser window is re-sized small enough so the elements are stacked vertically (I believe this is <code>@media (max-width: 767px)</code> ), the hover effect doesn't seem quite at clean. I would like to remove the effect altogether when the website is displayed this way (for mobile devices).</p>
  
  <p>So the question is how do I change a class's properties based on the width of the browser? I would like to remove the margin-top when hovered when displayed for a mobile device (ie; &lt; 767px) but keep it there when viewed normally.</p>
  
  <p>Thanks</p>