CSS table arrange elements order but image no longer responsive - html

Question

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;
}
}

Answer 1

You could try the fixed table layout:
.wrapper {
display: table;
width: 100%; /*added*/
table-layout: fixed; /*added*/
}
Of course, the image should be set as:
img {
max-width: 100%;
height: auto;
}
https://jsfiddle.net/n7bpz5sj/1/

Answer 2

The proper way to do layouts where you need to change the ordering of divs is with flexbox using the order property. In your case, the responsive layout would look something like this:
.wrapper {
display: flex;
flex-direction: column;
}
.sidebar {
order: 2;
}
.feature {
order: 1;
}