实际上，您不需要在PHP端完成所有工作，因为CSS可以使用nth selectors. 此外，因为所有这些子级都有前缀，所以您最好使用attribute selectors.

WORKING DEMO - JSFIDDLE

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
    background: snow;
    color: dimgrey;
}

.items {
    position: relative;
    display: block;
    clear: both;
    width: 100%;
}

.items [class^="entry-content-"] .copy {
    padding: 15px;
}

.items [class^="entry-content-"] {
    background: gainsboro;
    position: relative;
    min-height: 50px;
    word-wrap: break-word;
    display: inline-block;
    overflow: hidden;
    margin-bottom: 5px;

    width: 48.5%;
    float: left;
}

.items [class^="entry-content-"]:first-of-type {
    background: skyblue;
    color: snow;

    width: 100%;
    clear: both;
}

.items [class^="entry-content-"]:nth-child(even) {
    clear: both;
}

.items [class^="entry-content-"]:nth-child(odd) {
    float: right;
    clear: right;
}

使用jQuery，我们可以生成随机内容来检查各种大小以及它们如何影响布局。在这些情况下；第一个项目是全宽项目，左侧项目向左浮动，右侧项目向右浮动，下一行紧跟在最大项目之后。在行动中看到它here.

HTML

<div class="items">
    <div class="entry-content-main">Main</div>
    <div class="entry-content-rest">Post 1</div>
    <div class="entry-content-rest">Post 2</div>
    <div class="entry-content-rest">Post 3</div>
    <div class="entry-content-rest">Post 4</div>
    <div class="entry-content-rest">Post 5</div>
    <div class="entry-content-rest">Post 6</div>
</div>
<br/>
<br/>
<div class="items">
    <div class="entry-content-main">Main</div>
    <div class="entry-content-rest">Post 1</div>
    <div class="entry-content-rest">Post 2</div>
    <div class="entry-content-rest">Post 3</div>
    <div class="entry-content-rest">Post 4</div>
    <div class="entry-content-rest">Post 5</div>
    <div class="entry-content-rest">Post 6</div>
    <div class="entry-content-rest">Post 7</div>
</div> 

JS

function range(min, max){
    var range = max-min;
    return Math.floor( Math.random()*range ) + min;
}

// words to use
var things = ("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat.").split(\' \');

// random word factory
function getWords(count){ 
  var stuff = [];
    while(count && count>0){
     var thing = things[Math.floor(Math.random()*things.length)];  
     stuff.push(thing);
     count--;
  }
  return stuff.join(\' \');
}

var $ = $ || jQuery;
$(document).ready(function() {

   // add random content to all entries
   $(\'.items [class^="entry-content-"]\').each(function(inx, item){
        var $item = $(item),
        words = getWords ( range ( 5, 200) );
        $item.html ( \'<div class="copy">POST \' + inx + " - " + words + \'</div>\' );
   });

   // add random header content
   $(\'.items [class^="entry-content-"]:first-of-type\').each(function(inx, item){
        var $item = $(item),
        words = getWords ( range ( 5, 20) );
        $item.html ( \'<h1 class="copy">MAIN \' + inx + " - " + words + \'</h1>\');
   });
});

颜色通过neilorangepeel

好的，这是我的答案。

用于在两列中显示第一个全宽立柱和其余立柱。

<?php $i=0; $j=0;?>
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); 
if ($i==0){ 
      echo \'<div class="col-sm-12 col-md-12 col-lg-12">\'; //<-- bootstrap

      //you can also call get_the_title and the_content function if you are
      //doing theme customization instead of using get_template_part


      get_template_part( \'template-parts/content\', get_post_format() );
      echo \'</div>\';
         }
if($j<=1){
      echo \'<div class="col-sm-12 col-md-4 col-lg-4">\';
      get_template_part( \'template-parts/content\', get_post_format() );
      echo \'</div>\';
        }
        $i ++;
        $j ++;

        // End the loop.
        endwhile;

如果您想以全宽显示第一篇文章，其余部分显示在三列中，只需

 <?php $i=0; ?>
 <?php if ( have_posts() ) : ?>
 <?php
        // Start the loop.
  while ( have_posts() ) : the_post();

  if ($i==0){   
     echo \'<div class="col-sm-12 col-md-12 col-lg-12">\';
     get_template_part( \'template-parts/content\', get_post_format() );
     echo \'</div>\';
     }
        else{
      echo \'<div class="col-sm-12 col-md-4 col-lg-4">\';
      get_template_part( \'template-parts/content\', get_post_format() );
      echo \'</div>\';
        }
        $i ++;

        // End the loop.
        endwhile;

结果将是