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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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?

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

In comments they were saying truth you have to use flex-direction: column but it won't work beacuse what you had written css isn't resposnive friendly code so I re-created new one, use media-querries 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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>