Изменение порядка элементов DOM на экранах разных размеров

Question

Я хочу создать компонент с текстом слева или справа и рядом с ним.

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

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

Я создал рабочий пример, показывающий проблему

https://codesandbox.io/s/3qpj23y3o1

Как я могу исправить это поведение?Может быть, есть способ избавиться от этого заявления if тоже?Потому что единственное, что отличается, - это порядок изображения и текстовый контейнер.

Answer 1

Поскольку вы работаете с сеткой CSS, вы можете сделать это просто с помощью grid-template-areas и создать свои области img и txt:

   .textImageSectionContainer {
      ...
      grid-template-areas:'img' 'txt';

    }
    .imgContainer {
       ....
       grid-area:img;
      }
     .txtContainer {
       padding: 50px;
       grid-area:txt;
      }

, вы можете применить вышеуказанные правила для небольшихтолько размеры, в этом примере codesandbox я установил вышеупомянутые правила для размера экрана ниже 700px

Обновление :

Вы можете использовать привязку класса, чтобы избежатьоператор if и избыточный код:

<template>
  <div
    :class="{ imgleft: imageLeft, imgright: !imageLeft }"
    class="textImageSectionContainer"
  >
    <div class="imgContainer"><img :src="imgUrl" class="img" /></div>
    <div class="txtContainer">
      <div class="headerText">{{ headerText }}</div>
      <div class="mainText">{{ mainText }}</div>
    </div>
  </div>
</template>

и правила CSS должны выглядеть следующим образом:

.imgleft {
  display: flex;
}

.imgright {
  display: flex;
  flex-direction: row-reverse;
}