Как засунуть блок между двумя другими в зависимости от размера экрана используя Flexbox или Grid

Question

Сделать такое мешает wrapper первого и второго елементов, который нужен для декстопа. Единственное решение которое я смог придумать это js-ом делать unwraping на определенном расширении и тогда через flex свойство order ставить порядок блоков. Но есть ли css решение?

Answer 1

Для решения данной задачи можно использовать множество подходов, я покажу как можно это сделать на примере CSS Grid Layout:

.wrapper {
  display: grid;
  grid-template-columns: min-content min-content;
}

.wrapper > div {
  grid-column: 1 / 1;

  display: grid;
  align-items: center;
  justify-content: center;
  font-size: 20px;

  width: 100px;
  height: 100px;
  color: white;
  background-color: red;
  margin: 10px;
}

.wrapper > div:last-of-type {
  grid-column: 2 / 2;
  grid-row: 1 / 1;
}

@media screen and (max-width: 500px) { 
  .wrapper {
    grid-template-columns: min-content;
  }

  .wrapper > div:last-of-type {
    grid-column: 1 / 1;
    grid-row: 2 / 2;
  }
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Измените размер, используя @media-правило, на тот который Вам нужен.

Answer 2

Возможно так:

.items {
  display: grid;
  grid-template-areas: "block1 block3"
                        "block2 block3";
}

.block {
  width: 500px;
  height: 200px;
  border: 1px solid #000;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.block1{
  grid-area: block1;
}
.block2{
  grid-area: block2;
}

.block3 {
  height: 400px;
  grid-area: block3;
}

@media screen and (max-width: 600px) {
  .items {
    display: block;
  }
}

 <div class="items">
    <div class="block block1">1</div>
    <div class="block block3">3</div>
    <div class="block block2">2</div>
 </div>

Answer 3

Пример на всю страницу разверните, изменится положение.

.wrapper {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}

.block {
  margin: 5px;
  height: 30vh;
  border: 1px solid red;
}

.block:nth-child(2) {
  order: 1;
}


@media screen and (min-width: 720px) {
  .root {
    display: inline-block;
  }
  
  .block:nth-child(3) {
    position: absolute;
    right: 0;
  }
  .block {
    height: 40vh;
    width: 45vw;
  }
}

<div class="root">
  <div class="wrapper">
    <div class="block">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
  </div>
</div>

БЛОГ НА HUSL

Как засунуть блок между двумя другими в зависимости от размера экрана используя Flexbox или Grid

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