Html – How can I flip the even green boxes with the odd orange boxes?

I was building a website layout with a mobile-first approach and then using media query for laptop width: 1024px size. The design has 11 items and follows a flex that wraps. All the items are numbered and colored.

I want the even-numbered boxes on the left and the odd-numbered boxes on the right. It’s doing the opposite, as you can see in Fig,1. I hope someone can solve this and make me look like a dummy cause I spent a lot of time to no avail. Fig.1: Boxes Arrangement

/* Mobile First */

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.main-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 10px;
}

.item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
  flex: 1 1 100%;
}

.main-content>.item:nth-child(odd) {
  background-color: orange;
}

.item:nth-child(even) {
  background-color: lightseagreen;
}


/* Laptop Layout */

@media (min-width: 1024px) {
  .main-content {
    justify-content: space-between;
  }
  .item {
    flex: 0 0 48%;
    box-sizing: border-box;
  }
  /* help code goes here */
}

<div class="main-content">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
</div>

I tried to use "order" attribute and it flipped the even-numbered boxes to the top & odd-numbered boxes to the bottom. You can see how it ended up in Fig,2. Fig.2: Boxes Arrangement using Order, this is not the I wanted.

    .item:nth-child(odd) {
        order: 2;
    }

    .item:nth-child(even) {
        order: 1;
    }

I also tried to use grid layout but the problem with that is I get unwanted gaps. You can view Fig,3 in which the grid layout puts the odds to the right & evens to the left but there is an empty space before box no,1. Fig.3: Boxes Arrangement using Grid Layout

.main-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
}

...

/* Laptop Layout */
@media (min-width: 1024px) {
    .main-content {
        grid-template-columns: 1fr 1fr;
    }

    .item:nth-child(odd) {
        grid-column: 2;
    }

    .item:nth-child(even) {
        grid-column: 1;
    }
}