Display last DIV on top of display: grid CSS property during media queries

I have div with css property display: flex on normal browser width and change into display: grid on media queries.

.teal-container {    display: flex;    justify-content: center;  }  .description{    background-color: yellow;  }  .image{    background-color: blue;  }    @media screen and (min-width: 768px) and (max-width: 1440px) {    .teal-container {      display: grid !important;      justify-content: center !important;    }

<div class="teal-container">    <div class="description">Description here</div>    <div class="image">Image here</div>  </div>

The problem is when it becomes display: grid the last div (image div) is bottom of the stack/grid

css during media queries:

@media screen and (min-width: 768px) and (max-width: 1440px) {    .teal-container {      display: grid !important;      justify-content: center !important;    }  

I want to display the last div (image div) on top during display: grid media query:

is there a way to do it without re arranging on display: flex? Thank you

https://stackoverflow.com/questions/66575588/display-last-div-on-top-of-display-grid-css-property-during-media-queries March 11, 2021 at 10:19AM