Currently, I am working on a task involving GRID CSS. The main objective of the task is to utilize GRID specifically, rather than other methods like flex. I have successfully set up two columns in my GRID, each with its own divs. However, what I am struggling with is implementing responsive web design (RWD). In the RWD aspect, I need to combine both columns into one (which I have achieved) and then reverse their order. My question is, how can I move column B along with all its divs to the top of the 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>