重新排序网格项目

Question

我要在GRID CSS中执行任务（任务的主要目标是在GRID中进行此操作，而不是flex等）。我的GRID中有两列，每列都有自己的div，但这并不重要，因为我已经做了所有事情。重要的是制作RWD。在RWD中，我需要将两列都组合为一列（已经这样做）并反转它们。 如何将所有div都置于新列顶部的B列？

* {
  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>

Answer 1

您可以使用grid-template-areas和媒体查询来使其正常工作。

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>

这些帖子将帮助您了解grid-template-areas的工作方式：

• grid-template-areas with ASCII art is not working
• Grid areas not laying out properly in CSS Grid