Two column layout using Bootstrap [closed]

Question

Can anyone help me with this?

<div class="container">

    <div class="row">
          <div class="col-sm-8">

            <div class="row" style="margin-bottom: 30px;">

                        <div class="col-xs-12 col-sm-6">

                            newest article

                        </div>

                        <div class="col-xs-12 col-sm-6">

                            article

                        </div>

            </div>

        </div>

    </div>

    <div class="col-sm-4">

                <div class="row">

                    <div class="col-xs-12 col-sm-12">

                            this is for the sidebar

                    </div>

                </div>
    </div>

What I'm trying to achieve is to post articles in 2 columns and the other column is for the sidebar. I've read online for "php loop" but I have very limited knowledge with php.

Answer 1

The simplest way to go about this is to use "the loop" to also output your columns. So each post is in a column of its own, and they simply stack up on each other. Then when you reach bootstraps smaller break points the posts on the right will move directly under the post on the left. Like the illustration below. Which is the behavior you want.

---------------          ---------
Post 1 | Post 2           Post 1
Post 3 | Post 4  Becomes  Post 2
Post 5 | post 6           Post 3
---------------           Post 4
                          etc.
                          -------

There are some methods to only out put every other post into one column, and then output the rest in the other. The problem then would be that on narrower screens when the columns all stack in one column all of the right hand column would move under the left. Which I don't know why anyone would want. Like this...

---------------          ---------
Post 1 | Post 2           Post 1
Post 3 | Post 4  Becomes  Post 3
Post 5 | post 6           Post 5
---------------           Post 2
                          Post 4
                          Post 6   
                          -------

So this is how I would use "the loop" and mix it with bootstrap classes.

      <div class="row"> <!-- MAIN ROW START***** -->
         <div class="col-sm-8"> <!-- article columns -->
            <div class="row" style="margin-bottom: 30px;">
               <?php if (have_posts()) : while (have_posts()) : the_post();?> 
                 <div class='<?php echo 'col-xs-12 col-sm-6'; ?>'>
                   <h2><?php the_title(); ?></h2>
                   <p><?php the_content(); ?></p>
                 </div>
              <?php endwhile; endif; ?>
             </div>
          </div> <!-- article columns end -->

          <div class="col-sm-4"> <!-- Sidebar Start-->
            <div class="row">
               <div class="col-xs-12 col-sm-12">
                                this is for the sidebar
                </div>
            </div> 
          </div><!-- Sidebar End -->
       <div> <!-- MAIN ROW END -->