WordPress アーカイブページの記事の並びをタイル状にしたい

Question

前提・実現したいこと

カスタム投稿を一覧表示するアーカイブページを作成いたしました。
サムネイルとタイトルのみ表示し、タイル状に4列表示したく思います。
また、一覧ページをカテゴリ分けしたく思います。
投稿時に選択肢が2つありますので、それによって配置する場所を変えたいと思っております。

現在のソースコード

<div class="discography_contents">
 <?php if(has_post_thumbnail()): ?>
<p><a href="<?php the_permalink(); ?>" ><?php the_post_thumbnail('thumbnail'); ?></a></p>
 <p class="<?php echo esc_attr(get_post_type()); ?>" style="width:150px; margin-top:-40px;"><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></p>
 <?php endif; ?>
</div>

試したこと

Bootstrapのグリッドシステムを使おうと思いプラグインを導入して試しましたが、
そもそもサムネイルもタイトルもPHPによって読み込んでいるので、
記事ごとのdivの扱いなどができない状態です。

完成イメージ

イメージとしては

カテゴリA
□ □ □ □
□ □ □ □
□ □ □ □
□ □ □ □
□ □ □ □

カテゴリB
□ □ □ □
□ □ □

のようなイメージです。
ご回答よろしくお願いいたします。

Answer 1

Bootstrapの使い方は理解しているとして、考え方だけですが。
カテゴリごとに分ける場合は、カテゴリごとのループを作れば可能だと思います。

<div class="container">
    <div class="row">
        <div class="col-3">
            <div class="discography_contents">
                <?php if(has_post_thumbnail()): ?>
                    <p><a href="<?php the_permalink(); ?>" ><?php the_post_thumbnail('thumbnail'); ?></a></p>
                    <p class="<?php echo esc_attr(get_post_type()); ?>" style="width:150px; margin-top:-40px;"><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></p>
                <?php endif; ?>
            </div>
        </div>
        <div class="col-3">
            <div class="discography_contents">
                ・・・
            </div>
        </div>
        <div class="col-3">
            <div class="discography_contents">
                ・・・
            </div>
        </div>
        <div class="col-3">
            <div class="discography_contents">
                ・・・
            </div>
        </div>
        <div class="col-3">
            <div class="discography_contents">
                ・・・
            </div>
        </div>
    </div>
</div>