Aligning two DIVs with images side by side and making responsive

I’m really hoping someone can help me here as I’ve been working on this for days now and don’t have any hair left to pull out!!!!

I’m working on a WordPress site and trying to get the logo and an image to line up side by side and be somewhat responsive. I’ve got it working perfectly in Firefox and Chrome using ‘display: inline-flex’ but know that wont work for Safari width 700px – 960px or iPad portrait view where in both cases the logo and image stack on top of one another.

They should remain side by side until the screen width gets down to 700px then I’m happy for them to stack.

If anyone could help me out with the code required to get this working cross browsers I’d REALLY appreciate it.

Here is the site

I don’t think it complicates matters but the code for the logo is PHP rather than straight HTML, the code for the advert at the bottom is HTML (added by me)

        <?php
        $use_header_banner = et_get_option( 'lucid_468_header_enable', 'false' );
    ?>

    <div id="pt-header" class="container">
        <div id="logo-area"<?php if ( 'on' == $use_header_banner ) echo ' class="header_banner clearfix"'; ?>>
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
            <?php
                    $color_scheme = et_get_option( 'lucid_color_scheme', 'Orange' );
                    $color_scheme = ( 'Orange' == $color_scheme ) ? '' : '-' . strtolower( $color_scheme );
                    $logo = ( ( $user_logo = et_get_option('lucid_logo') ) && '' != $user_logo ) ? $user_logo : get_template_directory_uri() . "/images/logo{$color_scheme}.png";
                ?>
                <img src="<?php echo esc_url ( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo('name')) ; ?>" id="logo"/>
            </a>
            <?php if ( 'on' == $use_header_banner ){ ?>
                <div id="top_banner">
                    <?php
                    if ( ( $lucid_468_header_adsense = et_get_option('lucid_468_header_adsense') ) && '' != $lucid_468_header_adsense ) echo( $lucid_468_header_adsense );
                        else { ?>
                           <a href="<?php echo esc_url(et_get_option('lucid_468_header_url')); ?>"><img src="<?php echo esc_attr(et_get_option('lucid_468_header_image')); ?>" /></a>
                    <?php } ?>
                </div> <!-- end #top_banner -->
            <?php } ?>
        </div>
<div id="head-ad">
    <a href="http://www.focus-training.com/"><img src="http://sievecreative.co.uk/development/testsite/wp-content/uploads/ads/header.png" /></a>
</div>
    </div> <!-- end .container -->

Which ends up looking like this

<div id="pt-header" class="container">
<div id="logo-area">
<a href="http://sievecreative.co.uk/development/testsite/">
<img id="logo" alt="PT Magazine" src="http://sievecreative.co.uk/development/testsite/wp-content/uploads/2013/09/logo.jpeg">
</a>
</div>
<div id="head-ad">
<a href="http://www.focus-training.com/">
<img src="http://sievecreative.co.uk/development/testsite/wp-content/uploads/ads/header.png">
</a>
</div>
</div>

Here is all the associated CSS

#pt-header {
    margin-bottom: -2px;
    }

#logo-area img {
    float: left;
    padding-bottom: 11px;
    padding-top: 20px;
    clear: both;
}

.container #logo-area {
    margin-bottom: 0px;
    text-align: center;
}

#head-ad img {
    padding-left: 40px;
}

img {
    height: auto;
    max-width: 100%;
    width: auto;
}

@media only screen and ( min-width: 700px ) and ( max-width: 960px ) {
#pt-header {display: inline-flex;}
}

Thanks for looking.