CSS выравнивание отличается для мобильных и настольных ПК

Question

У меня есть этот макет:

.biggest {
  height: 500px;
  width: 50%;
  background-color: teal;
  float: left;
}

.section1 {
  height: 200px;
  width: 50%;
  background-color: white;
  float: right;
}

.inside1 {
  height: 30px;
  width: 90%;
  background: deeppink;
  margin: 20px;
}

.inside2 {
  height: 30px;
  width: 90%;
  background: forestgreen;
  margin: 20px;
}

<div>
  <div class="biggest"></div>
  <div class="section1">
    <div class="inside1"></div>
    <div class="inside2"></div>
  </div>
</div>

Я хочу выровнять поля в следующем порядке: розовый, бирюзовый и зеленый в мобильном представлении. Как это сделать?

Белое поле должно держать внутренние коробки вместе. Я сталкиваюсь с проблемами при выравнивании элементов внутри столбцов в другом порядке, так как блоки внутри столбца не могут быть разделены. Если у кого-то есть идея, как это сделать, объяснение будет очень полезным.

Answer 1

2 вещи:

1 - всегда старайтесь использовать самые простые html и css - это значительно облегчает отладку 2 - здесь есть хитрость. обратите внимание, как я должен был изменить порядок div в html. Таким образом, я могу использовать свойство float, а также перечислять div в правильном мобильном порядке.

body,
html {
  margin: 0;
  padding: 0;
}

.biggest {
  height: 500px;
  width: 50%;
  background: teal;
  float: left;
}

.inside1,
.inside2 {
  height: 200px;
  width: 50%;
  background: pink;
  float: right;
  margin-bottom: 100px;
}

.inside2{
   background:green;
   }

@media only screen and (min-width: 600px) {
  .biggest,
  .inside1,
  .inside2 {
    clear: both;
    width: 100%;
    margin-bottom: 100px;
  }
}

<div class="inside1"></div>
<div class="biggest"></div>
<div class="inside2"></div>

Answer 2

Используя макет сетки и медиазапрос для экрана мобильного устройства, вы можете достичь этого.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 100px);
  grid-auto-rows: 100px;
  grid-gap: 10px;
}

.pink {
  background: pink;
}

.teal {
  background: teal;
  grid-row: 1 / -1
}

.green {
  background: green;
}

@media only screen and (max-width: 480px) {
  .grid {
    grid-template-columns: 1fr;
  }
  .pink {
    grid-row: 1;
  }
  .teal {
    grid-row: 2;
  }
}

<div class="grid">
  <div class="teal"></div>
  <div class="pink"></div>
  <div class="green"></div>
</div>

Надеюсь, это поможет вам решить проблему.

Вот ссылка на codepen .

Answer 3

Когда inside1 и inside2 находятся в другом родительском контейнере, это невозможно. Тем не менее, одно решение состоит в том, чтобы все три элемента были в одном родительском контейнере, а затем использовать CSS Grid для построения двухколоночного макета, а также переупорядочить на другом размере экрана.

Вот CodePen демо: https://codepen.io/samsonzhangthesalmon/pen/qBdgZdy

В отличие от @ Prathame sh Ответ Кошти, моя сохраняет высоту розовых и зеленых блоков, используя min-content в сетке.

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: min-content minmax(min-content, 1fr);
}

.biggest {
  height: 500px;
  width: 100%;
  background-color: teal;
  grid-row: 1/3;
}

.inside1 {
  height: 30px;
  width: 100%;
  background: deeppink;
  margin: 20px;
}

.inside2 {
  height: 30px;
  width: 100%;
  background: forestgreen;
  margin: 20px;
}

@media (max-width: 600px) {
  /* example of mobile */
  .container {
    grid-template-columns: 1fr;
    /* reset to one column. Better than doing this is to put the two-column line in a min-width: 600px query and go mobile-first, but for the sake of clarity I'll overwrite it here */
  }
  .biggest {
    grid-row: 2/3;
  }
}

<div class='container'>
  <div class="biggest"></div>
  <div class="inside1"></div>
  <div class="inside2"></div>
</div>

Answer 4

к сожалению, из-за того, как вы их выровняли, вы не можете поместить .biggest между .inside1 и .inside2, потому что .biggest - это родительный падеж их родителя .section1, который с простыми html и css вы не можете сказать, что для мониторов не хватает .section1, а для мобильных телефонов - внутри .section1, хотя есть неприятный способ, который я не рекомендую, вы можете сделать это с помощью js, сначала вы должны получить элемент и сохранить его в переменная, затем попытайтесь удалить ее из того места, где она есть, а затем добавить ее рядом с .inside1, также вы можете использовать jquery и попробовать .detach() и .append(), чтобы отделить элемент и добавить его в другое место, которое вы можете прочитать больше об этом в здесь