реорганизовать flexbox с медиазапросами 1 - 2 в 2 -1

Question

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

.box {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

.box>* {
  flex: 1 1 160px;
  border: 1px solid blue;
  margin: 5px;
  padding: 50px;
}

.flex-item {
  border: 1px solid blue;
  margin: 5px;
  padding: 50px;
}

<article class="box">
  <p class="a">box a lorem ipsum ipsum </p>
  <p class="b">box b lorem ipsum ipsum </p>
  <p class="c">box c lorem ipsum ipsum </p>
</article>

Answer 1

Вы можете использовать CSS Grid с Media Queries . Пожалуйста, просмотрите вывод в полноэкранном режиме и уменьшите его ниже желаемой ширины, то есть 600 пикселей. Я объяснил код в комментариях.

Вывод:

.grid-container {
  display: grid;
  grid-template-columns: 2fr 1fr; /* 2 columns of 2 fractions and 1 fraction each */
  grid-template-rows: 1fr 1fr; /* 2 rows of a fraction each */
}

.box-a {
  grid-area: 1 / 1 / 2 / 2; /* Start at Row 1, Start at Column 1. End at Row 2, End at Column 2 */
}

.box-b {
  grid-area: 1 / 2 / 3 / 3;
}

.box-c {
  grid-area: 2 / 1 / 2 / 2;
}

@media (max-width: 600px) { /* Target for screens below width of 600px */
  .box-b {
    grid-area: 1 / 2 / 2 / 3;
  }
  .box-c {
    grid-area: 2 / 1 / 3 / 3;
  }
}


/* Snippet Styling */

.box-a {
  background: tomato;
}

.box-b {
  background: lightgreen;
}

.box-c {
  background: lightblue;
}

.grid-container>div {
  text-align: center;
  color: #fff;
  font-size: 3em;
  font-family: sans-serif;
  padding: 10%;
}

<div class="grid-container">
  <div class="box-a"> A </div>
  <div class="box-b"> <img src="http://placehold.it/100"> </div>
  <div class="box-c"> C </div>
</div>