.box {
  display: grid;
  gap: 10px;
}

/* 預設：窄螢幕（直排） */
.box pre {
  margin: 0;
  padding: 10px;
  background: #eee;
}

/* 寬螢幕 */
@media (min-width: 768px) {
  .box {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "b0 b3 b4"
      "b1 b5 b5"
      "b2 b6 b6"
      ".  b7 b7";
  }

  .b0 { grid-area: b0; }
  .b1 { grid-area: b1; }
  .b2 { grid-area: b2; }
  .b3 { grid-area: b3; }
  .b4 { grid-area: b4; }
  .b5 { grid-area: b5; }
  .b6 { grid-area: b6; }
  .b7 { grid-area: b7; }
}