在不同的列中显示wordpress帖子

Question

I try to figure out to display the wordpress posts in my blog page in different columns. Example : First two posts in two rows, remaining posts in two columns one by one same as attached.

How can i display posts same as attached?

Thanks in Advance!!

And here is my code.

<div class="container">
<div class="row">
    <div class="col-xs-12 col-sm-6">
                <?php
                $news_args = array(
                    'cat' => 3,
                    'paged' => get_query_var('paged'),
                    'posts_per_page' => 4,
                    'orderby' => 'post_date',
                    'order' => 'DESC',
                );
                $news_query = new WP_Query($news_args);
                if ($news_query->have_posts()) :
                while ($news_query->have_posts()) : $news_query->the_post();
                ?>

                                <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                                    <p><span><?php the_time('F j, Y'); ?>
                                    </span>
                                    <span><?php echo "By: ".get_the_author(); ?>
                                    </span>
                                    <span>
                                    <?php
                                    $commentcount = comments_number('0', '1', '%');
                                    $fulltitle = $title . ' (' . $commentcount . ' comments)';
                                    ?>Comments<?php wp_count_comments( $post_id ); ?> 
                                    </span></p>

                                <figure class="fig_rel1">
                                <?php the_post_thumbnail(); ?>
                                </figure>
                                <p>
                                <?php
                                $content = get_the_content('',FALSE,'');
                                $content = apply_filters('the_content', $content);
                                $content = str_replace(']]>', ']]>', $content);
                                echo substr($content,0,300).'<a href="'. get_permalink($post->ID) .'">Read More &raquo; </a>';
                                ?>
                                </p>

                <?php
                endwhile;
                previous_posts_link('prev', $news_query->max_num_pages);
                echo ' &mdash; ';
                next_posts_link('next', $news_query->max_num_pages);
                endif;
                ?>

                </div>
                </div>
                </div>

Answer 1

It can help you.

$news_args = array(
    'cat' => 3,
    'paged' => get_query_var('paged'),
    'posts_per_page' => 4,
    'orderby' => 'post_date',
    'order' => 'DESC',
);

$news_query = new WP_Query($news_args);

$count = 0;

if ($news_query->have_posts()) :
while ($news_query->have_posts()) : $news_query->the_post();

    if ( $count < 2 ) {
       //code to populate first two post
       $count++;
    }else
       //code to populate remaining posts
       $count++;
    }

endwhile;