html - CSS Code Structure with PHP Loops Round 2

Question

Round 2: Trying to figure out why my content looks fine when screen size is under 992px but not when it is over. Everything looks fine in the lower screens but hardly anything is in the right place in full screen size. I have a feeling it's because of the containers inside the loop, but I'm not sure how to properly take them out without it forcing everything into a narrow column from the .col-md-1 container.

<?php get_header(); ?>
<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">Blog</h1>
        <ol class="breadcrumb">
            <li><a href="#">Home</a>
            </li>
            <li class="active">Blog</li>
        </ol>
    </div>
</div>
<div class="row">
    <div class="col-lg-8">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <div class="col-md-1 text-center">
            <p><?php the_time('l, F jS, Y'); ?></p>
        </div>
        <?php if ( has_post_thumbnail() ) : ?>
            <div class="col-md-5">
                <a href="<?php the_permalink(); ?>">
                    <?php the_post_thumbnail( 'large', array( 'class' => 'img-responsive img-hover' ) ); ?>
                </a>
            </div>
        <?php endif; ?>
        <div class="col-md-6">
            <h3>
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </h3>
            <p>by <?php the_author_posts_link(); ?>
            </p>
            <p><?php the_excerpt(); ?></p>
            <a class="btn btn-primary" href="<?php the_permalink(); ?>">Read More <i class="fa fa-angle-right"></i></a>
        </div>
<hr>
<?php endwhile; ?> 
                    <div class="navigation"><p><?php posts_nav_link('','&laquo; Newer Posts','Older Posts &raquo;'); ?></p></div>
                </div>
    <?php include 'include.php'; ?>
</div>
<?php else: ?>
  <p><?php _e('Sorry, there are no posts.'); ?></p>
<?php endif; ?>
<?php get_footer(); ?>

Any insight is greatly appreciated :)

Answer 1

As has been mentioned by others, you need to use some additional grid classes.

For your 8 | 4 grid to work on medium and large devices, you would need to use col-md-8 col-lg-8 on your content area and col-md-4 col-lg-4 on your sidebar.

You'll also want to make sure that your blog posts grids have col-lg-* classes alongside their col-md-* classes.

For your layout to work properly on mobile and tablet devices you'll also want to add some col-xs-* and col-sm-* classes.

For more information on the Bootstrap grid system, I would recommend you view: https://getbootstrap.com/css/#grid