如何重新创建“图像在左，文本在右”和“图像在右，文本在左”模式？

<div class="image-text-container">
  <img src="image.jpg" alt="Image" class="image">
  <p class="text">Text content goes here</p>
</div>

.image-text-container {
  display: flex; /* 使用flexbox布局 */
  align-items: center; /* 垂直居中对齐 */
}

.image {
  width: 50%; /* 图像占容器宽度的一半 */
}

.text {
  width: 50%; /* 文本占容器宽度的一半 */
}

// 获取容器元素
const container = document.querySelector('.image-text-container');

// 添加点击事件监听器
container.addEventListener('click', function() {
  // 切换图像和文本的位置
  container.classList.toggle('reverse');
});

.image-text-container.reverse {
  flex-direction: row-reverse; /* 图像在右，文本在左 */
}

.image-text-container.reverse .image {
  order: 2; /* 图像在右侧，改变元素顺序 */
}

.image-text-container.reverse .text {
  order: 1; /* 文本在左侧，改变元素顺序 */
}