Php 自定义帖子类型循环：在4列中分组标题，在1列中直接包含4篇帖子的内容

我正在尝试执行一个PHP循环，该循环将为自定义post类型输出以下内容：

<div class=“row”>
    <div class=“col-sm-12 col-md-6 col-lg-3”>Custom Post Title 1</div>
    <div class=“col-sm-12 col-md-6 col-lg-3”>Custom Post Title 2</div>
    <div class=“col-sm-12 col-md-6 col-lg-3”>Custom Post Title 3</div>
    <div class=“col-sm-12 col-md-6 col-lg-3”>Custom Post Title 4</div>
</div>
<div class=“row”>
    <div class=“col-12”>Custom Post Content 1</div>
    <div class=“col-12”>Custom Post Content 2</div>
    <div class=“col-12”>Custom Post Content 3</div>
    <div class=“col-12”>Custom Post Content 4</div>
</div>
<div class=“row”>
    <div class=“col-sm-12 col-md-6 col-lg-3”>Custom Post Title 5</div>
    <div class=“col-sm-12 col-md-6 col-lg-3”>Custom Post Title 6</div>
    <div class=“col-sm-12 col-md-6 col-lg-3”>Custom Post Title 7</div>
    <div class=“col-sm-12 col-md-6 col-lg-3”>Custom Post Title 8</div>
</div>
<div class=“row”>
    <div class=“col-12”>Custom Post Content 5</div>
    <div class=“col-12”>Custom Post Content 6</div>
    <div class=“col-12”>Custom Post Content 7</div>
    <div class=“col-12”>Custom Post Content 8</div>
</div>

自定义帖子标题1
自定义帖子标题2
自定义帖子标题3
自定义帖子标题4
自定义帖子内容1
自定义帖子内容2
自定义帖子内容3
自定义帖子内容4
自定义帖子标题5
自定义帖子标题6
自定义帖子标题7
自定义帖子标题8
自定义帖子内容5
自定义帖子内容6
自定义帖子内容7
自定义帖子内容8

最终，这是一个引导式手风琴，标题在4列中，但当手风琴折叠时，它会折叠成全宽列，将其下方的行向下推

我还必须记住响应性，这样当它变为col md大小时，输出将变为：

<div class=“row”>
    <div class=“col-sm-12 col-md-6 col-lg-3”>Custom Post Title 1</div>
    <div class=“col-sm-12 col-md-6 col-lg-3”>Custom Post Title 2</div>
</div>
<div class=“row”>
    <div class=“col-12”>Custom Post Content 1</div>
    <div class=“col-12”>Custom Post Content 2</div>
</div>
<div class=“row”>
    <div class=“col-sm-12 col-md-6 col-lg-3”>Custom Post Title 3</div>
    <div class=“col-sm-12 col-md-6 col-lg-3”>Custom Post Title 4</div>
</div>
<div class=“row”>
    <div class=“col-12”>Custom Post Content 3</div>
    <div class=“col-12”>Custom Post Content 4</div>
</div>
<div class=“row”>
    <div class=“col-sm-12 col-md-6 col-lg-3”>Custom Post Title 5</div>
    <div class=“col-sm-12 col-md-6 col-lg-3”>Custom Post Title 6</div>
</div>
<div class=“row”>
    <div class=“col-12”>Custom Post Content 5</div>
    <div class=“col-12”>Custom Post Content 6</div>
</div>
<div class=“row”>
    <div class=“col-sm-12 col-md-6 col-lg-3”>Custom Post Title 7</div>
    <div class=“col-sm-12 col-md-6 col-lg-3”>Custom Post Title 8</div>
</div>
<div class=“row”>
    <div class=“col-12”>Custom Post Content 7</div>
    <div class=“col-12”>Custom Post Content 8</div>
</div>

自定义帖子标题1
自定义帖子标题2
自定义帖子内容1
自定义帖子内容2
自定义帖子标题3
自定义帖子标题4
自定义帖子内容3
自定义帖子内容4
自定义帖子标题5
自定义帖子标题6
自定义帖子内容5
自定义帖子内容6
自定义帖子标题7
自定义帖子标题8
自定义帖子内容7
自定义帖子内容8

然后，当它变为col sm大小时，它会变为：

<div class=“row”>
    <div class=“col-sm-12 col-md-6 col-lg-3”>Custom Post Title 1</div>
</div>
<div class=“row”>
    <div class=“col-12”>Custom Post Content 1</div>
</div>
<div class=“row”>
    <div class=“col-sm-12 col-md-6 col-lg-3”>Custom Post Title 2</div>
</div>
<div class=“row”>
    <div class=“col-12”>Custom Post Content 2</div>
</div>
<div class=“row”>
    <div class=“col-sm-12 col-md-6 col-lg-3”>Custom Post Title 3</div>
</div>
<div class=“row”>
    <div class=“col-12”>Custom Post Content 3</div>
</div>
<div class=“row”>
    <div class=“col-sm-12 col-md-6 col-lg-3”>Custom Post Title 4</div>
</div>
<div class=“row”>
    <div class=“col-12”>Custom Post Content 4</div>
</div>
<div class=“row”>
    <div class=“col-sm-12 col-md-6 col-lg-3”>Custom Post Title 5</div>
</div>
<div class=“row”>
    <div class=“col-12”>Custom Post Content 5</div>
</div>
<div class=“row”>
    <div class=“col-sm-12 col-md-6 col-lg-3”>Custom Post Title 6</div>
</div>
<div class=“row”>
    <div class=“col-12”>Custom Post Content 6</div>
</div>
<div class=“row”>
    <div class=“col-sm-12 col-md-6 col-lg-3”>Custom Post Title 7</div>
</div>
<div class=“row”>
    <div class=“col-12”>Custom Post Content 7</div>
</div>
<div class=“row”>
    <div class=“col-sm-12 col-md-6 col-lg-3”>Custom Post Title 8</div>
</div>
<div class=“row”>
    <div class=“col-12”>Custom Post Content 8</div>
</div>

自定义帖子标题1
自定义帖子内容1
自定义帖子标题2
自定义帖子内容2
自定义帖子标题3
自定义帖子内容3
自定义帖子标题4
自定义帖子内容4
自定义帖子标题5
自定义帖子内容5
自定义帖子标题6
自定义帖子内容6
自定义帖子标题7
自定义帖子内容7
自定义帖子标题8
自定义帖子内容8

任何帮助都会被感激的，我已经尝试了一切，我知道我要做什么，但我不能得到它的权利。我试着把它们分成4组，嵌套循环，计数等等。

---

我认为PHP循环无法完成您试图完成的任务，因为它会生成静态标记，并且您需要基于用户代理的流畅标记。您有什么建议吗？我可以想出3个选项。首先，您可以使用三个单独的PHP循环打印内容三次，并使用一些更简单的JS和CSS根据视口显示相应的块（例如，使用基于视口宽度具有条件可见性的特殊类将每个内容块包装在一个div中）。其次，您可以使用单个PHP循环打印一次内容，并使用一些复杂的JS根据视口重新排列标记。第三，您可以重新设计您的目标标记，以便它可以在一个循环中使用PHP打印，但可以通过更复杂的CSS重新排列以适应不同的视口