Front End Developer Advanced CSS Layout Assessment issue

I finished the Front End Developer Advanced CSS Layout Assessment and on #4 my solution looks exactly as it should, but it shows an error saying > 600px has to have 7,5,8 in the middle.
The instructions said to pay attention to the order, and as I used grid for my solution, I didn’t have to use order for my solution for that.

<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8">
  <link rel="stylesheet" href="src/styles.css">
  <div data-testid="wrapper">
    <div id="five">5</div>
body {
  background-color: white;

  display: grid;
  gap: 10px;

div div{
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 101px;

@media screen and (max-width: 600px){
      order: -5;

@media screen and (min-width: 601px){
    grid-template-rows: repeat(4,1fr);
    grid-template-columns: repeat(4,1fr);
      grid-row: span 2;
      grid-column: span 2;
      height: 100%;

/* Add your CSS here */

I cant see the actual requirements from the assessment, but the “middle” doesnt sound right as being the bottom-middle row if you’ve got a 4x3 grid…?

If I can add screenshots, I’ll add them when I’m back on my computer.

This result passed all the checks except the one one, but the results were visually the same. Ends up looking like this above 600px:

0 1 2 3
4 5 5 6
7 5 5 8
9 10 11 12