How to set a pattern for re-ordering a variable number of grid items?

Question

This is a bit of a "follow up" question on Change the column order in a css grid

In that question a solution is given for ordering the cells of a grid when using a smaller screen. It works, however it's not "extendible": as in it only works on a grid with a predefined number of rows. The solution as given per above question:

3. order

The order property in Grid Layout does the same as in Flex Layout.

 
 grid-container {
   display: grid;
   grid-template-columns: 15% 1fr 25%;
   grid-auto-rows: 50px; /* for demo */
   grid-gap: 10px;
 }
 
 @media ( max-width: 500px ) {  
   grid-container         { grid-template-columns: 1fr 1fr;  }
   grid-item:nth-child(1) { order: 1; }
   grid-item:nth-child(2) { order: 3; grid-column: 1 / 3; }
   grid-item:nth-child(3) { order: 2; }
 }
 
 /* non-essential decorative styles */
 grid-item {
   border: 1px solid gray;
   background-color: lightgreen;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 grid-item:nth-child(2) {
   background-color: orange;
 }
 
 

 
 <grid-container>
   <grid-item>1</grid-item>
   <grid-item>2</grid-item>
   <grid-item>3</grid-item>
 </grid-container>
 
 

jsFiddle demo 3

In our application the number of "rows" is not given and can be more. The test is:

 grid-container {
   display: grid;
   grid-template-columns: 15% 1fr 25%;
   grid-auto-rows: 50px; /* for demo */
   grid-gap: 10px;
 }

 @media ( max-width: 500px ) {  
   grid-container         { grid-template-columns: 1fr 1fr;  }
   grid-item:nth-child(3n-2) { order: 1; }
   grid-item:nth-child(3n-1) { order: 3; grid-column: 1 / 3; }
   grid-item:nth-child(3n) { order: 2; }
 }

 /* non-essential decorative styles */
 grid-item {
   border: 1px solid gray;
   background-color: lightgreen;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 grid-item:nth-child(3n-1) {
   background-color: orange;
 }

 <grid-container>
   <grid-item>1</grid-item>
   <grid-item>2</grid-item>
   <grid-item>3</grid-item>
   <grid-item>4</grid-item>
   <grid-item>5</grid-item>
   <grid-item>6</grid-item>
   <grid-item>7</grid-item>
   <grid-item>8</grid-item>
   <grid-item>9</grid-item>
   <!-- etc -->
 </grid-container>

jsfiddle

As one can quickly see the orders makes all "2nd" cells (2, 5, 8...) all the way to the bottom instead of keeping each group of 3. In a simple ascii art I'd like:

c1 c3
c2 c2
c4 c6
c5 c5
c7 c9
c8 c8

(How) can this be done?