Сделайте 2 деления пересекающимися с 2 другими делами

Question

Итак, я не знаю, как сделать так, чтобы div-ы перекрывали друг друга таким образом, и мне любопытно узнать, возможно ли это вообще. Если это так, то возможно ли сделать что-то подобное тоже адаптивным, используя bootstrap или какую-то другую библиотеку? Если да, не нужно ли div'ам полностью менять конфигурацию, чтобы содержание имело смысл? (как на картинке ниже) Если что-то подобное не может произойти (имеется в виду отзывчивость), есть ли способ заставить все это исчезнуть и вместо этого показать что-то еще?

Answer 1

Это может дать вам начало?

Вам нужно будет использовать комбинацию @media запросов и flex.

Просмотрите @media запросов здесь: CSS @media Rule

Просмотрите flex поле здесь: Полное руководство по Flexbox

Этот код может помочь! (Измените размер окна вывода, чтобы увидеть результаты)

Смотрите здесь: JSFiddle

.panel-container {
  
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.panel {
 
}

.col {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

#a1 {
  background-color: blue;
  height: 100px;
  width: 100px;
  line-height: 100px;
  text-align: center;
}

#a2 {
  background-color: blue;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  line-height: 100px;
  text-align: center;
}

#a3 {
  background-color: blue;
  height: 100px;
  width: 100px;
  line-height: 100px;
  text-align: center;
}

#b1 {
  background-color: red;
  height: 100px;
  width: 100px;
  line-height: 100px;
  text-align: center;
}

#b2 {
  background-color: red;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  line-height: 100px;
  text-align: center;
}

#b3 {
  background-color: red;
  height: 100px;
  width: 100px;
  line-height: 100px;
  text-align: center;
}

@media only screen and (max-width: 600px) {
  .container {
    display: flex;
    flex-direction: column;
  }

  .col {
    display: flex;
    flex-direction: column;
  }
}

 <div class="container">
   <div class="col">
     <div id="a1">A1</div>
     <div id="a2">A2</div>
     <div id="a3">A3</div>
   </div>
   <div class="col">
     <div id="b1">B1</div>
     <div id="b2">B2</div>
     <div id="b3">B3</div>
   </div>
 </div>

 <div class="panel-container">
   <div id="lhs" class="panel"></div>
   <div id="rhs" class="panel"></div>
 </div>

Answer 2

это возможно. используйте CSS flexbox

https://css -tricks.com / snippets / css / a-guide-to-flexbox /

вы хотите изменить направление изгибаэлемент контейнера с медиа-запросом css и так далее ... это более связанная с html / css проблема, чем javascript