带有横向和纵向图像的响应式画廊

我想要一个显示照片网格的图库页面。照片的顺序相当重要，需要从左到右一行一行地排列。此外，布局需要具有响应性，根据页面大小使用不同的列数。如果所有的照片都是横向的，那么这不是问题。我目前正在这样做：

HTML

<div class="thumbcontainer">
    <?php
        for ($i=1; $i<=27; $i++){
            echo '<a class="thumbnail" href="gallery/image.php?image=' . $i . '"><img src="gallery/thumbnails/image_' . $i . '.jpg" width="100%"></a>' . "'n";
        }
    ?>  
</div>

CSS

@media all and (min-width: 905px){
    .thumbnail{
        width: 19%;
    }
}
@media all and (max-width: 904px){
    .thumbnail{
        width: 24%;
    }
}
.thumbcontainer{
    width: 100%;
    display: block;
    text-align: center; 
    padding-top: 3px;
}
.thumbnail{
    display: inline-block;
    text-align: center;
    padding-bottom: 8px;
    margin-left: 2px;
    margin-right: 2px;
}

问题是，我希望在网格中也能有占据两行网格的肖像图像（它们的宽度与风景图像相同，高度是风景图像的两倍），同时保持网格的响应性。例如，如果L表示横向，P表示纵向，数字表示图像编号，则网格可能如下所示：

L1 L2 P3 L4

P5 L6 P3 L7

P5 L8 L9 L10

有办法做到这一点吗？我到处搜索，绞尽脑汁，但如果事先不知道所需的列/行数和肖像图像在顺序中的位置，我想不出一种方法来做到这一点。任何建议都将不胜感激。