title: How swap between cells on a single column in css grid?
body: <p>Im making a responsive behaviour to my site. Its a simple grid of 2 columns and auto rows with various items. I added this to make it to only 1 column at 890px:</p>
  <pre><code>@media all and (max-width: 890px) {
  .main-container div {
      grid-column: 1 / span 3;
  }}
  </code></pre>
  <p>Then they do it nicely. The problem its that I had 14 items in that grid. And I want at this point that the .item6 goes where the .item7 is, and the other way around.
  I tried to add &quot;order:x&quot; to the items and changing that order when the screen its at 890px but doesnt work.</p>
  <p><a href="https://i.stack.imgur.com/b6RpK.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>Here u can see better, the .item6 is another wall of text. The next item (.item7) its a picture. I want that .item7 to be placed where .item6 is. Swap its positions. Thanks!</p>