How to wrap 2nd div to collapse top first?-CodePudding

I want to wrap the Column 2 to be at the top as it will contain a cover image. I have an example HTML below

* {
  box-sizing: border-box;
}
/* Container for flexboxes */
.row {
  display: flex;
  flex-wrap: wrap;
}


/* Create two equal columns */
.column {
  flex: 50%;
  padding: 20px;
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}

<h2>How to wrap 2nd column to the top.</h2>
<div >
  <div  style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>

  <div  style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
</div>

CodePudding user response：

using flex-direction will do it for you

.row {
  display: flex;
  /* use this if your elements are supposed to be reversed horizontally */
  flex-direction: row-reverse;
  /* use this if you want to reverse them vertically*/
  flex-direction: column-reverse;
}