PHP und Wordpress - Platziere den Inhalt in der richtigen Spalte

Ich habe eine FAQ-Seite. Beantwortung von Fragen. Die Reihenfolge der Fragen spielt keine Rolle. Was zählt, ist das Layout. Es ist ein dreispaltiges Layout.

Wenn Sie nur 3 Fragen haben, ist das Layout korrekt. Es sieht aus wie das

[Frage Z] [Frage A] [Frage O]

Das Problem
Wenn Sie 4 Fragen haben, sieht das Layout so aus.

[frage Z] [frage A]
[frage X] [frage O]

Es sollte so aussehen

[Frage Z] [Frage A] [Frage O]
[frage X]

Es ist ein 3-Spalten-Layout. Ich möchte, dass die Fragen die erste Zeile ausfüllen. Dann fang mit der Sekunde an.

Ich muss dies tun, ohne das Bootstrap-Raster zu ändern.

Die Gürtellinie wurde so eingerichtet, dass beim Klicken auf eine Frage nur die Spalte und nicht die Zeile erweitert wird.

<?php if ( $wp_query->have_posts() ) : ?>
    <?php 
        $counter=0;
        $total_posts = $wp_query->post_count;
        $posts_per_column = ceil($total_posts / 3);
    ?>


<section class="faq content">
<div class="container-fluid">
  <div class="container-wrapper-faq">
    <div class="row">
    <div class="col-lg-4">
      <div class="col-lg-12">
            <?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); $counter++; ?>                 
          <div class="faq-all">
            <div class="faq-item">
              <h2><?php the_title(); ?></h2>
              <article>
                <div class="faq-intro">
                   <?php the_content(); ?>
                </div>
                <div class="faq-info">
                   <?php the_content(); ?>
                </div>   
                <div class="faq-link">
                  <a href="#" class="read-more">LES HELE SVARET</a>
                  <a href="#" class="read-less">LES MINDRE</a>
              </div>
             </article>
            </div>
          </div> 
            <!-- Close and open div if the "counter" divided by the "posts per column" of columns you want equals zero -->
            <?php if($counter % $posts_per_column == 0) echo '</div></div><div class="col-lg-4"><div class="col-lg-12">'; ?>
            <?php endwhile; ?>
        </div>
    </div>
  </div>
  </div>
</div>

Danke im Vorau

Antworten auf die Frage(2)

Ihre Antwort auf die Frage