css - Column count not working as expected on firefox -

actually i'm working on project: project page

this google chrome: firefox buggy version:

on ie11 , chrome can see in same way, expected. issue firefox. column-count doesn't work in other browsers. can't understand i'm doing wrong. website bootstrap based. here code generates top part of page:

<div class="lefttext">      <?php $loop = new wp_query( array( 'post_type' => 'expo_page', 'posts_per_page' => -1 ) ); ?>      <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>          <div class="row col-md-12">              <h2 class="titlecontact text-left"><?php the_title();?></h2>              <div class="section-divider big col-md-12"></div>          </div>          <div class="col-md-12 row">              <?php the_content();?>          </div>      <?php endwhile; wp_reset_query(); ?>  </div><!-- .lefttext --> 

here css:

.lefttext{  column-count: 2;  column-gap: 20px;  -moz-column-count: 2;  -moz-column-gap: 20px;  -webkit-column-count: 2;  -webkit-column-gap: 20px;  margin: 20px 0 0 0; 

}

if needed html generated wordpress:

<div class="lefttext">                <div class="row col-md-12">                  <h2 class="titlecontact text-left">meeting &amp; conferenze al casale borghese</h2>                  <div class="section-divider big col-md-12"></div>              </div>              <div class="col-md-12 row">                  <p style="text-align: left;">la location di un evento richiede una scelta accurata: dettagli dell’arredo, l’atmosfera, l’organizzazione degli spazi sono tutti elementi essenziali per conferenze e meeting dall’elevata qualità. <em>casale borghese</em> ti propone suoi lussuosi ambienti d’epoca per un evento di successo.</p> <p style="text-align: left;"><em>casale borghese</em> suggerisce una formula esclusiva per l’organizzazione efficace e chic di meeting e conferenze:</p> <p><br></p> <p style="text-align: left;"><strong>ambiente di lusso</strong></p> <p style="text-align: left;">sia all’interno che all’esterno del palmento, è possibile usufruire di una varietà di spazi funzionali, quali si estendono fra il lusso e la versatilità dell’antico casale. il casale dispone di due aree principali:</p> <p style="text-align: left;">• palmento: comprende un’ampia sala retrò – chic ricavata al suo interno e restaurata in stile contemporaneo. l’interno del palmento è articolato in più spazi dalla sontuosa architettura ed è ideale per allestire conferenze esclusive e organizzare raffinati meeting.</p> <p style="text-align: left;">• giardino d’epoca: consiste in un lussuoso angolo verde altamente versatile, corredato da piscina e gazebo rustico. ideale per un meeting esclusivo o una conferenza alternativa, il giardino del casale consente inoltre di godere di uno spazio aggiuntivo, brioso e chic, per l’intrattenimento dei partecipanti all’evento.</p> <hr> <p style="text-align: left;"><strong>allestimento smart</strong></p> <p style="text-align: left;">dalla disposizione di banchetti e suppellettili alle illuminazioni, la varietà di ambienti del casale ti consente di giocare con gli spazi e scegliere la soluzione più adatta soddisfare le tue esigenze in fatto di organizzazione e stile.</p> <p style="text-align: left;">per meeting e conferenze esclusive, il casale ti propone una serie di elementi da scegliere per la tua formula personalizzata:</p> <p style="text-align: left;">• allestimento<br> • suppellettili<br> • musica<br> • illuminazione interna ed esterna<br> • decorazioni<br> • addobbi floreali</p>              </div>       </div> 

this:

<div class="lefttext">     <div class="row col-md-12"> 

doesn't make sense. in cases, col-*s should children of rows, col-md-12 directly under lefttext instead. also, don't think you're supposed use col-* , row on same element either.

i think want:

<div class="lefttext">     <div class="row">         <div class="col-md-12">