Wordpress Yazıları listeletirken tablolar düzensiz gösteriliyor (css+php)

Wordpress arşiv sayfasında yazıları gösterirken 4 sütun şeklinde göstermesini istedim birinci satırda doğru gösteriyor fakat 2. satırda bir tane gösterip 3. satırda gösteriyor ekran görüntüsü ve kullandığım kodlar aşağıdaki gibidir

.span_4_of_4 {
    width: 100%;
}

.span_3_of_4 {
    width: 74.6%;
}

.span_2_of_4 {
    width: 49.2%;
}

.span_1_of_4 {
    width: 23.8%;
}

Php sayfasındaki kod

<div class="col span_1_of_4">
<article class="recent">
<div class="view third-effect">
<?php
if ( has_post_thumbnail() ) {
$image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),'recent' );
echo '<img alt="post" class="imagerct2" src="' . $image_src[0] . '">';
}
?>
<div class="mask">
<a href="<?php the_permalink(); ?>" class="info">Full Image</a>
</div>

</div>
<div class="recent_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
             </div>
            </article>

Sorunuzun php ile ilgisi yok. Bu tarz grid yapısı için en sağlam yöntem flex tir. Ana kapsayıcıya display: fiex verip alt elemanlara flex: 0 0 50% gibi değerler vererek stilinizi oluşturabilirsiniz.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://fatihhayrioglu.com/yenilenmis-flex-modulu/

hocam

.col {
     display: flex;
flex-wrap: wrap-reverse;
        float:left;
    margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */

Yukarıdaki değişikliği yaptım kutu boyutları oynama oldu ama sıralamada değişiklik olmuyor

Site adresi nedir? Bu şekilde fazla yardımcı olamam.