bootstrap row-flexbox на Firefox не разбивается на новую строку

Question

У меня есть макет с использованием гибкого режима. Это хорошо в Chrome и Safari, однако в Firefox и IE это выглядит довольно плохо. Это мой HTML:

<div ng-repeat="section in categorySections" class="row-flex row-flex-wrap"> 
    <div class="flex-col lesson-section col-md-12"> 
     <h2>{{ section.title }}</h2> 
     <p>{{ section.description }}</p> 
    </div> 
    <div ng-repeat="lesson in section.lessons" class="col-md-3"> 
     <div class="panel flex-col"> 
      <div class="panel-title"> 
       <h3>{{ lesson.title }}</h3> 
       <small>{{ lesson.date }}</small> 
      </div> 
      <div class="panel-body flex-grow"> 
       <p>{{ lesson.shortDescription }}</p> 
      </div> 
      <div class="panel-footer"> 
       <a href="#/chords/{{ lesson.id }}"><i class="fa fa-angle-right"></i> Continue</a> 
      </div> 
     </div> 
    </div> 
</div> 

И CSS:

.row-flex, .row-flex > div[class*='col-'] { 
display: -webkit-box; 
display: -moz-box; 
display: -ms-flexbox; 
display: -webkit-flex; 
display: flex; 
flex:1 1 auto; 
} 

.row-flex-wrap { 
    -webkit-flex-flow: row wrap; 
    align-content: flex-start; 
    flex:0; 
} 

.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] { 
    margin:-.2px; /* hack adjust for wrapping */ 
} 

.container-flex > div[class*='col-'] div, .row-flex > div[class*='col-'] div { 
    width:100%; 
} 

.flex-col { 
    display: flex; 
    display: -webkit-flex; 
    flex: 1 100%; 
    flex-flow: column nowrap; 
} 

.flex-grow { 
    display: flex; 
    -webkit-flex: 2; 
    flex: 2; 
} 

и вот как это выглядит в Firefox:

Карты должны быть под заголовком, а не на в правой части страницы.

Кто-нибудь помогает мне, что я делаю неправильно?

Answer 1

{ 
    display:-moz-deck; 
    width:100%; 
}