Написать резиновый блок с divами внутри

Question

Подскажите как оформить блок с двумя РЕЗИНОВЫМИ divами и заголовком внутри, чтобы при адаптивной верстке, на мобильном например, они стояли друг под другом и не убегали за края экрана. Был бы очень благодарен примеру кода! Ниже привожу схематичные варианты

Десктоп:

Мобильная:

Answer 1

.first-div{
  color: orange;
  width:250px;
  height:50px;
  border:1px solid orange;
  margin:auto;
 
}

.second-div{
    color: red;
  width:250px;
  height:350px;
  border:1px solid red
}
.third-div{
    color: blue;
  width:250px;
  height:350px;
  border:1px solid blue
}
.for-flex{
  display:flex;
  justify-content:space-evenly;
   padding-top:20px;
   flex-wrap:wrap
}
@media(max-width:575px){
.first-div{
margin:auto;

}
.second-div{
margin:auto

}
.third-div{
margin:auto
}

}

<div class="head-div">
  <div class="first-div"></div>
  <div class="for-flex">
  <div class="second-div"></div>
  <div class="third-div"></div>
  </div>
</div>

БЛОГ НА HUSL

Написать резиновый блок с divами внутри

Ответы (1 шт):