I have bootstrap card, and i'm trying to change ***order*** position of image `card-img-top` from bottom to top, whit media query. Its working in chrome, edge, opera, vivaldi, but ***flex order*** doesn't seems to be working in mozila firefox. What could cause this problem?

**HTML**

```
<div class="card card-second" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">Heading</h5>
                    <img src="img/test-image.png" class="rectangle">
                    <p class="card-text rounded-card">Lorem ipsum</p>
                    <img class="card-img-top img-center" src="img/image-frame.png" alt="Card image cap">
                </div>
            </div>

```

**CSS**

```
 .card-second .card-body .card-img-top{
        -webkit-order: -1;
        order: -1;
        display: -webkit-box;      
        display: -moz-box;         
        display: -ms-flexbox;      
        display: -webkit-flex;     
        display: flex;
    }

```

*Last time I checked, firefox supports flex order, but seems not working.*

> 
> How it looks in firefox: <http://prntscr.com/icq5w8> 
> 
> 
> How it looks in other browsers: <http://prntscr.com/icq6dm>
> 
> 
>