I’m struggling to think of a nice way to setup my grid items in an HTML page. I have a number of charts, each with a previous and current version. Sometimes they have different heights so I decided to have two columns and as many rows as needed, with the Previous charts on the left and current charts on the right:

<div class="my-grid">
  <div class="chart previous">Previous</div>
  <div class="chart current">Current</div>
  <div class="chart previous">Previous</div>
  <div class="chart current">Current</div>
</div>

However, when I have a narrow screen, I want all the charts in one column, with all the current charts before all the previous charts. I tried some CSS grid but it doesn’t move the charts to the front or the back. I tried using grid-template-areas but then all the charts overlapped.

Here’s a codepen of what I have

If you made the view narrow, the blocks should reorder so all the current orange blocks are on the top, followed by all the previous blocks, with their original order respected.

Here’s an image of the desired wide view (this works right now)

Narrow:

How can I make this work with CSS grid, or with some other simple css? I don’t mind rearranging the items in HTML, so long as they are ordered correctly on the display.