Различная ширина столбца в 2 строках с бутстрапом и пользовательскими типами сообщений – нужны разные классы

Я использую пользовательский тип сообщения на моем веб-сайте WP, а также используя загрузку.

Я хочу перечислить 5 пользовательских записей типа ввода на моей домашней странице, и я хочу, чтобы первые 3 имели класс col-md-4 в одной строке, а в следующей строке 2 cpt записи имели класс col-md-6

На данный момент у меня есть класс col-md-4 и 2 элемента во 2-й строке не очень хорошо центрируются.

Это мой текущий код:

<div class="container-fluid gray-section"> <div class="container"> <div class="row"> <?php $projects = get_posts(array('post_type'=>'project','posts_per_page'=>5, 'order'=>'ASC')); if ($projects) { ?> <ul class="list-unstyled"> <?php foreach ($projects as $post) { setup_postdata( $post ) ?> <li class="col-md-4 col-sm-6 col-xs-12 col-xxs-12 text-center "> <a class="highlights-item" href="<?php echo get_permalink(); ?>"> <div class="highlights-container"> <?php the_post_thumbnail(); ?> <span class="highlights-title"> <?php the_excerpt(); ?> </span> </div> </a> </li> <?php } wp_reset_postdata(); ?> </ul> <?php } ?> </div> <!-- end row --> </div> <!-- end container --> </div> <!-- end container fluid --> 

Любые предложения, как это исправить?

Solutions Collecting From Web of "Различная ширина столбца в 2 строках с бутстрапом и пользовательскими типами сообщений – нужны разные классы"

Попробуйте код ниже.

 <div class="container-fluid gray-section"> <div class="container"> <div class="row"> <?php $projects = get_posts(array('post_type'=>'project','posts_per_page'=>5, 'order'=>'ASC')); if ($projects) { ?> <ul class="list-unstyled"> <?php $i = 0; ?> <?php foreach ($projects as $post) { setup_postdata( $post ) ?> <?php if($i % 3 == 1) { ?> <li class="col-md-4 col-sm-6 col-xs-12 col-xxs-12 text-center "> <?php } else if ($i % 3 == 0 && $i > 0) { ?> <li class="col-md-6 col-sm-6 col-xs-12 col-xxs-12 text-center "> <?php } ?>** <a class="highlights-item" href="<?php echo get_permalink(); ?>"> <div class="highlights-container"> <?php the_post_thumbnail(); ?> <span class="highlights-title"> <?php the_excerpt(); ?> </span> </div> </a> </li> <?php $i++; ?> <?php } wp_reset_postdata(); ?> </ul> <?php } ?> </div> <!-- end row --> </div> <!-- end container --> </div> <!-- end container fluid -->