Flip two horizontal tiles to vertical on mobile using CSS - html

Question

I am new to responsive styling and couldnt find a solution to my problem elsewhere:
I have two horizontally aligned tiles on Desktop viewport. One is a div that contains text, the other is an image.
My code for this:
.tile-image{
width: 70%;
}
.tile-text{
width: 30%;
background-color: #d9b886;
color: white !important;
font-size: 2vh;
display: table;
word-wrap: break-word;
white-space: normal;
}
.tile-text-inner{
display: table-cell;
vertical-align: middle;
padding: 20px;
}
.container{
display: flex;
flex-direction: row;
}
<div class="container">
<div class="tile-text">
<div class="tile-text-inner">
TEXT
</div>
</div>
<div class="tile-image">
<img src="https://test-shop.tt-gmbh.de/media/a9/b8/4c/1638172501/13811-AdobeStock_294559939_New-Africa.jpg">
</div>
</div>
On mobile viewport I want to display both tiles vertically with the image on top and the text tile below. Like in the image below:
How can I achieve this?

Answer 1

You can use media queries
#media screen and (max-width: 600px) {
.container {
flex-direction: column-reverse;
}
.tile-text{width: 100vw}
}
.tile-image{
width: 70%;
}
.tile-text{
width: 30%;
background-color: #d9b886;
color: white !important;
font-size: 2vh;
display: table;
word-wrap: break-word;
white-space: normal;
}
.tile-text-inner{
display: table-cell;
vertical-align: middle;
padding: 20px;
}
.container{
display: flex;
flex-direction: row;
}
#media screen and (max-width: 600px) {
.container {
flex-direction: column-reverse;
}
.tile-text{width: 100vw}
}
<div class="container">
<div class="tile-text">
<div class="tile-text-inner">
TEXT
</div>
</div>
<div class="tile-image">
<img src="https://test-shop.tt-gmbh.de/media/a9/b8/4c/1638172501/13811-AdobeStock_294559939_New-Africa.jpg">
</div>
</div>

Answer 2

In comments they were saying truth you have to use flex-direction: column but it won't work because what you had written css isn't responsive friendly code so I re-created new one, use media-queries for responsive, and please avoid using a lot div wrapping it makes lots of complexity
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
position: relative;
width: 100%;
height: 100vh;
}
.container img {
width: 100%;
height: 100%;
position: absolute;
}
.container .tile-text{
display: flex;
justify-content: center;
align-items: center;
width: 30%;
z-index: 9;
height: 100%;
background: #d9b886;
}
.container .tile-text .tile-text-inner{
color: #FFF;
}
#media screen and (max-width: 761px){
.container{
flex-direction: column-reverse;
}
.container .tile-text{
width: 100%;
height: 30%;
}
}
<div class="container">
<div class="tile-text">
<div class="tile-text-inner">
Marry Christmas
</div>
</div>
<img src="https://test-shop.tt-gmbh.de/media/a9/b8/4c/1638172501/13811-AdobeStock_294559939_New-Africa.jpg">
</div>