Change the column order in a css grid

I am playing around with CSS grids.

When I view it on a desktop size (min-width: 769px) I have a single row with 3 columns - something like this:

---------------------------------------------
|   col 1     |         col 2       | col 3 |
|             |                     |       |
---------------------------------------------

Can I with css-grid move the columns around so I can do something like this on a mobile layout:

---------------------------------------------
|     col 1             |      col 3        |
|                       |                   |
---------------------------------------------
|                     col 2                 |
---------------------------------------------

I know I span cells with something like this:

.content{
  grid-column: 1 / span2;
}

But I want to change the order of the columns. Can I do that without a pre-processor?

Here is my current grid class:

.my-grid {
   display:grid;
   grid-template-columns: 15% 1fr 25% ;
   grid-template-rows: 1fr; /* for as many rows as you need */
   grid-gap: 10px;
   border: 2px solid #222;
   box-sizing: border-box;
}