Firefox上的bootstrap row-flexbox不會換行

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%;
}