CSS проблема с разрывом в элементе div

Question

Пункты перечислены не в том порядке, в котором есть пробелы между пунктами, перечисленными, как это исправить.

Снимок экрана: https://prnt.sc/sphfig

  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <div class="tg-topcity">
            <figure class="tg-cityimg">                                 
                <img src="<?php echo esc_url( $cat_image ); ?>" alt="<?php esc_html_e('City Image', 'listingo'); ?>">                                   
                <figcaption>                                        
                    <h3><a href="<?php echo esc_url( get_term_link( $value->term_id, 'cities' ) ); echo esc_attr( $custom_url  ); ?>"><?php echo esc_attr( $value->name ); ?></a></h3>
                    <span><?php echo esc_attr( $total_users ); ?>&nbsp;<?php esc_html_e('Listings', 'listingo'); ?></span>                                      
                </figcaption>
            </figure>
        </div>
    </div>
<?php } } ?>

CSS

.tg-topcity, .tg-popularcities {
    width: 100%;
    float: left;
}