WP Loop With Flexbox (Mobile) / Category Type

WP_Flexbox.html

<div class="container-fluid">
  
    <?php get_header(); ?>
        
        <div class="row">
             
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                        
            <div class="col-xs-6 col-sm-6 col-md-2 col-lg-2 justify-content: center">
                
            <?php if (has_post_thumbnail()) : ?>
               
            <!--The category Description / Link -->
              
            <?php
            
            global $post;
            
            $categories = get_the_category($post->ID);
            
            $cat_link = get_category_link($categories[0]->cat_ID);
            
            echo '<a href="'.$cat_link.'">'.$categories[0]->cat_name.'</a>' 
            
            ?>
             
            <!--Image-->
              
            <figure class="article-preview-image">
                        
            <?php the_post_thumbnail('large'); ?>
                        
            </figure>
                
            <?php else : ?>
        
            <?php endif; ?>
              
            <!--Title-->
                
            <h2 class="post-title"><a href="<?php the_permalink(); ?>" class="post-title-link"><?php the_title(); ?></a></h2>
              
            <!--Excerpt-->
              
            <?php the_excerpt(); ?>    
                        
            <div class="clearfix"></div>
                
            </div>
                            
            <?php endwhile;
                            
            else : ?>
            
            <article class="no-posts">
            
            <h1><?php _e('No posts were found.'); ?></h1>
            
            </article>
                
            <?php endif; ?>
                            
        </div> 
 
 </div>
  
<div class="clearfix"></div>

<?php get_footer(); ?>