title: Change the column order in a css grid
body: <p>I am playing around with CSS grids.</p>
  
  <p>When I view it on a desktop size <code>(min-width: 769px)</code> I have a single row with 3 columns - something like this:</p>
  
  <pre><code>---------------------------------------------
  |   col 1     |         col 2       | col 3 |
  |             |                     |       |
  ---------------------------------------------
  </code></pre>
  
  <p>Can I with css-grid move the columns around so I can do something like this on a mobile layout:</p>
  
  <pre><code>---------------------------------------------
  |     col 1             |      col 3        |
  |                       |                   |
  ---------------------------------------------
  |                     col 2                 |
  ---------------------------------------------
  </code></pre>
  
  <p>I know I span cells with something like this:</p>
  
  <pre><code>.content{
    grid-column: 1 / span2;
  }
  </code></pre>
  
  <p><strong>But I want to change the order of the columns. Can I do that without a pre-processor?</strong></p>
  
  <p>Here is my current grid class:</p>
  
  <pre><code>.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;
  }
  </code></pre>