Re-ordering grid items

Question

I have task to do in GRID css (the task main goal is to do this in GRID, not flex etc). I have two columns in my GRID, every column has own divs, but it is not important, because I already did everything. Important thing is to make RWD. In the RWD I need combina both columns to one (already did) and reverse them. How to reverse column B with all divs to be at the top of new column??

How to reverse column B with all divs to be at the top of new column??

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.row {
  float: left;
  width: 49%;
}

.column {
  border: 1px solid red;
  height: 40px;
}

@media only screen and (max-width: 600px) {
  .row {
    width: 70%;
  }
}

<div class="row">
  <div class="column">A1</div>
  <div class="column">A2</div>
</div>
<div class="row">
  <div class="column">B1</div>
  <div class="column">B2</div>
</div>

Please provide a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). Please look at guide [how do I ask a good question?](https://stackoverflow.com/help/how-to-ask) — Andrzej Ziółek, Jul 02 '18 at 16:48
Simple and easy. But we need to see the code you have tried. — Michael Benjamin, Jul 02 '18 at 17:11
ok i added some code, what I want to do here is, when screen comes to 600px width, row with B1 and B2 go on the top, A1 and A2 on the bottom. — Mat_-_, Jul 03 '18 at 10:42
its only for example. im just wondering how to put B columns on the top — Mat_-_, Jul 03 '18 at 14:45

Michael Benjamin · Accepted Answer · 2018-07-04T14:42:39.910

You can use grid-template-areas and a media query to make it work.

jsFiddle demo

.row {
  display: grid;
  grid-template-areas: " a1 b1 " 
                       " a2 b2 ";
}

@media ( max-width: 500px) {
  .row { grid-template-areas: " b1" "b2" "a1" "a2" ;}
}

.row> :nth-child(1) { grid-area: a1; }
.row> :nth-child(2) { grid-area: a2; }
.row> :nth-child(3) { grid-area: b1; }
.row> :nth-child(4) { grid-area: b2; }

/* just decorative styles */
.row {
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
.column {
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightgreen;
}

<div class="row">
  <div class="column">A1</div>
  <div class="column">A2</div>
  <div class="column">B1</div>
  <div class="column">B2</div>
</div>

These posts will help you understand how grid-template-areas works:

Re-ordering grid items

1 Answers1

jsFiddle demo