如何将下部分移动到上部分的右侧？

<div class="container">
  <div class="upper-section">
    <!-- 上部分内容 -->
  </div>
  <div class="lower-section">
    <!-- 下部分内容 -->
  </div>
</div>

.container {
  width: 100%;
  height: 100%;
  display: flex;
}

.upper-section {
  flex: 1;
  /* 上部分样式 */
}

.lower-section {
  width: 30%;
  /* 下部分样式 */
  position: absolute;
  top: 0;
  right: 0;
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .lower-section {
    width: 100%;
    position: static;
  }
}