CSS адаптивная карта без начальной загрузки

Question

Я хотел бы создать адаптивную карту в html и CSS без использования начальной загрузки:

образец карты

Большое спасибо!

Answer 1

Было бы лучше использовать flex так:

* {
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 100vh;
  flex-wrap: no-wrap;
}

.container div {
  width: 50%;
  height: 200px;
}

.picture {
  background: #4451c2;
}

.text {
  background: #f451c2;
}

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
  .container div {
    width: 100%;
  }
}

<div class="container">
  <div class="picture">picture</div>
  <div class="text">Some text is here</div>
</div>

С правилом @media, где мы изменим width на 100% и flex-order на column.

P.S .: не обращайте внимания на высоту блоков, это просто, например, как решить вашу проблему с размером экрана.