Javascript 在不同屏幕大小上对DOM元素重新排序

我想创建一个组件，其左侧或右侧有一个文本，旁边有一个图像

目前我只使用bool参数来检查哪个元素先出现。在较大的屏幕上，一切都很好，但在较小的屏幕上，每个图像都应该在文本上方

如果文本位于左侧，则不起作用，因为它将自身置于图像上方

我创建了一个工作示例来说明这个问题

---

我如何纠正这种行为？也许有一种方法也可以摆脱这个if语句？因为唯一不同的是图像和文本容器的顺序。

因为您使用的是CSS网格，所以只需使用

网格模板区域

并创建区域

img

和

txt

：

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

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

您可以仅对小尺寸应用上述规则，在本例中，我将屏幕大小的上述规则设置为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>

---

正是我想要的：）你知道我是否可以去掉模板中的大if语句吗？@Question3r哪个语句？模板顶部的if语句component@Question3r我更新了我的答案和代码Sandox Code我一直在从你Boussadjra那里学习CSS。坚持下去，兄弟：）

.imgleft {
  display: flex;
}

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