Küçük bir css düzenlemesi yardımı +R10

Merhabalar, internet üzerinden bir adet post card buldum ve kendi sistemime entegre ettim ancak bir türlü post cardları yan yana getiremedim. Kodu düzenleyebilecek biri var mıdır?
Aşağıya bırakıyorum tüm detayları;

Şu anki görünüm;
Style dosyası;

<style>@import url('https://fonts.googleapis.com/css?family=Darker+Grotesque|Montserrat&display=swap');
.post-wrapper{    min-height:20vh;    display:-webkit-box;    display:-ms-flexbox;    display:flex;    -webkit-box-align:center;        -ms-flex-align:center;            align-items:center;    -webkit-box-pack:center;        -ms-flex-pack:center;            justify-content:center;    padding:1em;}.posts{    width:400px;    -webkit-box-shadow: 0 0.2rem 1rem 0 rgba(0, 0, 0, 0.25);            box-shadow: 0 0.2rem 1rem 0 rgba(0, 0, 0, 0.25);   border-radius: 8px;}.posts a {    text-decoration:none;}.posts .thumbnail{   margin: 0 0 1rem 0;   position: relative;   height: 200px;}
.posts .thumbnail img{   width: 100%;   height:200px;   -o-object-fit: cover;      object-fit: cover;   border-top-right-radius: 8px;   border-top-left-radius: 8px;}.posts .thumbnail .thumbnail--overlay{   background: rgba(0,0,0, 0.5);   height: 100%;   width: 100%;   min-height: 200px;   border-top-right-radius: 8px;   border-top-left-radius: 8px;   position: absolute;   top:0;   opacity: 0;   -webkit-transition: 0.8s ease;   -o-transition: 0.8s ease;   transition: 0.8s ease;}.posts:hover .thumbnail .thumbnail--overlay{   opacity: 1;} .posts .desc, .posts .performance{    padding: 1rem}.posts .desc .title{   font-family: 'Montserrat';   font-size: 23px;   -webkit-transition: 0.8s ease;   -o-transition: 0.8s ease;   transition: 0.8s ease;   color:#555555;
}.posts .desc .subtitle{   font-size: 14px;   font-weight: 400;   color:#888888;}.posts .performance{    border-top:1px solid #f1f1f1;}.posts .performance a{   font-size: 14px;   font-weight: 700;   color: #555555;   font-family: 'Darker Grotesque';}</style>

PHP DOSYASI;

@if (count($posts)>0)<div class="row">    <div class="col-xs-12">        @foreach ($posts as $post)


<div class="post-wrapper">    
<div class="posts">        
<a href="{{route('front.news', $post->slug)}}">            
<div class="thumbnail">                
<div class="thumbnail--overlay">                
</div>                
<img src="{{$post->image}}" alt="{{$post->title}}">            
</div>            
<div class="desc">                
<h1 class="title">{{$post->title}}</h1>                
<p class="subtitle">TEST</p>          
 </div>        
</a>      
 <div class="performance">          
 <span class="@if(config('settings.orientation') === 'rtl') pull-right @else pull-left @endif" style="width: 110px">                  
 <i class="fa fa-clock-o"></i> {{ App::make("HelperController")->formateCreationDate($post->created_at) }}&nbsp;&middot;&nbsp;                </span>                    
</div>    
</div>
</div>
     </div>      
 </div>        
@endforeach    
</div>
</div>

Cssde
.post-wrapper
İçine
flex-direction:column;
Şu satırı ekleyin

Maalesef işe yaramadı hocam.

Css Kod include edilmişse cache olasılığı var
Opera:
Ctrl+f5
Chrome
Ctrl+shift+r ile yenileyip bakın birde

Yok hocam css dosyasından çekilmiyor direkt php üzerinden çekiyorum. Dediklerinizi yaptım; https://prnt.sc/wo5nba

.post-wrapper içerisine float: left; eklediğinizde olması lazım

https://prnt.sc/wo61li şu şekilde sola yapışık hale geldi ancak yan yana gelmedi.

Önceki dediğim cssi boşverin yanlış demişim
div class="col-xs-12"> şu satırdan sonra
<div class="d-flex flex-column">
ve altta kapatın</div>
Mobildeyim deneme fırsatım olmuyor buda olmazsa bilen çıkacaktır

https://prnt.sc/wo68c3

Ben oradaki kodları kopyalayıp yapıştırdım. Float:left ekledim sonuç bu şekilde