Need to show different logo in mobile and tablet devices

Question

I am building an ecommerce site using this theme http://goo.gl/3BwG7R

I have changed the header to black and and have a light logo. When viewed on mobile and tablet I need the header to be white (native) and the logo to be dark.

I have failed to utilize the media queries to make this happen.

The theme has 2 header files, the main file calls the other files to display stuff.

*** MAIN HEADER ------------------

<div id="logo" class="positionleft"><?php if_logo(); // print the logo html ?></div>

--------------------------------------------

*** SECOND HEADER (called header-functions) -----------------

// print the logo html
if(!function_exists("if_logo")){
function if_logo(){ 

        $logotype = if_get_option( THE_SHORTNAME . '_logo_type');
        $logoimage = if_get_option( THE_SHORTNAME . '_logo_image'); 
        $sitename =  if_get_option( THE_SHORTNAME . '_site_name');
        $tagline = if_get_option( THE_SHORTNAME . '_tagline');

        if($sitename=="") $sitename = get_bloginfo('name');
        if($tagline=="") $tagline = get_bloginfo('description'); 
        if($logoimage == "") $logoimage = get_stylesheet_directory_uri() .            "/images/logo.png"; 
      ?>
        <?php if($logotype == 'textlogo'){ ?>

            <h1><a href="<?php echo home_url( '/'); ?>" title="<?php echo        esc_attr( get_bloginfo( 'name', THE_LANG ) ); ?>"><?php echo $sitename; ?></a></h1><span        class="desc"><?php echo $tagline; ?></span>

        <?php } else { ?>

        <div id="logoimg">
        <a href="<?php echo home_url( '/' ) ; ?>" title="<?php echo $sitename; ?>" >
            <img src="<?php echo $logoimage ; ?>" alt="<?php echo $sitename; ?>" />
        </a>
        </div>

    <?php } ?>

     <?php 
  }
}

*** MAIN CSS --------------------------

#logo{margin-right:7px;padding:14px 10px ;}
#logo img{height:43px;}
#logo h1{margin-bottom:0px; letter-spacing:-1px;}
/* Menu */
#navigation{text-align:left;}
#topnav{
margin:0;
padding:0px 0 0 0px;
list-style-type:none;
overflow:visible;
position:relative;
float:right;

}

*** LAYOUT CSS ---------------------

   #logo{text-align:center;margin:0px;}
   #logoimg img{text-align:center;margin:0px auto; max-width:100%;}

Answer 1

Here is a quick mark up of what it would look like to use media queries with img rather than using a background image. I used divs instead of images, but it's the same concept. If you minimize the browser you will see the text change.

Answer 2

Use logo as a background with media query.

@media (min-width:769px){
    #logo{
        background-image: url(link/to/main/logo.png);
    }
}

@media (max-width:768px){
    #logo{
        background-image: url(link/to/tablet/logo.png);
    }
}

@media (max-width:480px){
    #logo{
        background-image: url(link/to/mobile/logo.png);
    }
}