#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  width: 80%;        /* 全体幅を常に80%に */
  margin: 0 auto;    /* 中央寄せ */
  gap: 10px;
  box-sizing: border-box;
}

.item {
  border: 1px solid #00007f;
  box-sizing: border-box;
  height: 100px;
}

/* 通常：２列配置（左480px + 右200px） */
#div1, #div2, #div3 {
  flex: 0 0 480px;
}
#div4, #div5, #div6 {
  flex: 0 0 200px;
}


/* ▼ 画面が700px以下のとき：縦１列に並べる */
@media screen and (max-width: 700px) {
  #container {

  }
  .item {
    width: 100%;   /* 横幅を全て同じ（親の80%）に */

  }

  /* 並び順を変更 */
  #div1 { order: 1; }
  #div2 { order: 2; }
  #div3 { order: 3; }
  #div4 { order: 4; }
  #div5 { order: 5; }
  #div6 { order: 6; }
}