CSS table arrange elements order but image no longer responsive

I am working on a WordPress site and developing the blog posts page. I have set it up so you have the posts on the left and the sidebar on the right. But I have placed the sidebar code at the top of the page with logic to determine which side the users wants the sidebar.

The problem I was trying to solve was if the sidebar code is at the top in mobile devices it will be shown before the blog posts. So I found a method that uses table features to help resolves this. This works fine for all pages except the blog posts, when I resize, the thumbnail image is shown at it’s full size despite me constraining it to the max width of the container.

PHP/HTML:

<?php get_header(); ?>

<div class="wrapper">   

    <?php if ( get_theme_mod( 'realestatepro_sidebar_position', esc_attr__( 'right', 'realestatepro' ) ) == "left" )  

        { echo '<div class="col-xs-12 col-sm-3 col-md-3 sidebar left-sidebar">'; }

    else

        { echo '<div class="col-xs-12 col-sm-3 col-md-3 sidebar right-sidebar">'; }

    ?>

        <?php get_sidebar(); ?>

    </div>

    <div class="col-xs-12 col-sm-9 col-md-9 feature">

        <div class="col-xs-12 col-sm-12 col-md-12 blog-article">

            <?php 

            if( have_posts() ):

                while( have_posts() ): the_post(); ?>

                    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <?php the_title('<h3 class="entry-title">','</h3>' ); ?>
                                <small>Post in:<?php the_category(' '); ?>, by <?php the_author_link(); ?> on <?php the_time('F jS, Y'); ?></small>
                            </div>

                        <?php if( has_post_thumbnail() ): ?>

                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <?php the_post_thumbnail('full'); ?>
                            </div>

                        <?php endif; ?>

                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <?php the_content(); ?>
                        </div>

                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <hr>
                            <div class="col-xs-6 text-left"><?php previous_post_link(); ?></div>
                            <div class="col-xs-6 text-right"><?php next_post_link(); ?></div>
                        </div>

                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <hr>
                            <?php 
                                if( comments_open() ){ 
                                    comments_template(); 
                                }                               
                             ?>
                        </div>

                    </article>

                <?php endwhile;

            endif;

            ?>

        </div>

    </div>

</div>

<?php get_footer(); ?>

CSS:

.blog-article img {
    height: auto;
    max-width: 100%;
    margin: 10px 0px;
}

.left-sidebar {
    float: left;

}

.right-sidebar {
    float: right;
}

@media (max-width: 767px) {

    .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
        float: none;
    }

    .wrapper {
        display: table;
        float: right;
    }

    .sidebar {
        display: table-footer-group;
    }

    .feature {
        display: table-header-group;
    }

}