SO hide/ display image

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="http://www.defie.co/docs/examples/css/demo.css" />
    <link rel="stylesheet" type="text/css" href="http://www.defie.co/docs/examples/css/style2.css" />
    <script type="text/javascript" src="http://www.defie.co/docs/examples/js/modernizr.custom.28468.js"></script>
    
    <noscript>
      <link rel="stylesheet" type="text/css" href="http://www.defie.co/docs/examples/css/nojs.css" />
    </noscript>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>defie</title>
    <link rel="stylesheet" href="http://www.defie.co/docs/examples/defie/jquery.bxslider.css" type="text/css">
    <script src="http://www.defie.co/docs/examples/defie/jquery.min.js"></script>
    <script src="./defie/jquery.bxslider.js"></script>
    <script src="./defie/rainbow.min.js"></script>
    <script type="text/javascript" async="" src="http://www.defie.co/docs/examples/defie/bsa.js"></script>
    <script type="text/javascript" src="http://www.defie.co/docs/examples/defie/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="http://www.defie.co/docs/examples/defie/jquery.bxSlider.min.js"></script>
     <!--<link href="http://www.defie.co/docs/assets/css/bootstrap-responsive.css" rel="stylesheet">-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
    <link...

CSS

/* for window widths > 767px
show desktop image and hide iphone image */

img.desktopSliderImage{
  border:solid red 1px;
}
img.iphoneSliderImage{
  border:solid blue 1px;
  display:none !important;
}

/* for window widths 767px and less
hide desktop image and show iphone image */

@media (max-width: 767px) {
  img.desktopSliderImage{
  border:solid red 1px;
  display:none !important;
}
img.iphoneSliderImage{
  border:solid blue 1px;
  display:inherit !important;
}

}