Bootstrap：网格结构，避免空白和移动列周围的麻烦

Question

想知道是否有人可以提供帮助，我正在构建一个Wordpress主题，但我认为我的具体问题是使用Bootstrap，所以在这里提问是有道理的！在手动编码时，这是一种非常简单的方法，但是与Wordpress循环的工作方式有关，我需要正确地进行操作。

我有一个页面上有人的图像（约30人）

Example of page

目标是当用户点击Person 1时，会在他们下面显示关于Person 1的事实，当他们点击Person 2时，会出现关于Person 2的事实等等。

在桌面设备上，我将这些分为4列，平板电脑3列和移动2列。一切都很完美。但是，当我开始缩小浏览器大小时，我会获得大量的空白区域。我知道为什么会这样，但我试图找出解决问题的最佳方法。所有人都被Word中的PHP所吸引，所以我需要以某种方式构建它。

此图片应显示我

后的内容

最好的办法是什么？也许在Bootstrap中嵌套？