css - Bootstrap column ordering Firefox issue -

i have 3 columns in app, 2 thin side columns, , thicker 1 in middle. in mobile view, want middle 1 on top, used push-pull method. works perfectly.

in large view, want 3 columns same height, regardless of content, used table/table-cell display method. works fine too, prevents push-pull in firefox.

i have bootply illustrating problem: http://www.bootply.com/vhjym1etyl

run in ie, ff & chrome. you'll see in ff "mid" column on left. comment out "height" classes , see gets pulled correct locations again.

bootstrap push , pull uses float. setting none, eliminate ability push or pull. not need float: none if add height want class.

updated bootply

.col-md-height {     display: table-cell;     /*float: none;*/     vertical-align: top;     height: 300px; } 

edit: dynamic height can use jquery instead of float: none. new bootply

$(window).resize(function() {   if($(window).width() >= 1200) {         $('.col-md-height').css('height', $('.container-md-height').height());   } else {         $('.col-md-height').css('height', 'auto');   } }); 

edit #2: css solution, can add large negative margin-bottom , equivalent padding-bottom 3 columns , set container's overflow hidden. if way not need use table or table-cell displays.

css bootply

.col-md-height {     margin-bottom: -2000px;     padding-bottom: 2000px; } .container-md-height {     overflow: hidden; }