<div class="container">
  <p class="ttl">row-reverseを有効的に使う</p>
  <ul class="box">
    <li class="item">
      <div class="img"></div>
      <div class="txtarea">
        <p class="txt">odd-item</p>
        <a class="link">view details</a>
      </div>
    </li>
    <li class="item">
      <div class="img"></div>
      <div class="txtarea">
        <p class="txt">even-item</p>
        <a class="link">view details</a>
      </div>
    </li>
    <li class="item">
      <div class="img"></div>
      <div class="txtarea">
        <p class="txt">odd-item</p>
        <a class="link">view details</a>
      </div>
    </li>
    <li class="item">
      <div class="img"></div>
      <div class="txtarea">
        <p class="txt">even-item</p>
        <a class="link">view details</a>
      </div>
    </li>
    <li class="item">
      <div class="img"></div>
      <div class="txtarea">
        <p class="txt">odd-item</p>
        <a class="link">view details</a>
      </div>
    </li>
  </ul>
</div>

.container {
  
}

.ttl {
  font-size: 24px;
  font-weight: bold;
}

.box {
  padding: 0;
}

.item {
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
  align-items: flex-start;
  
  &:nth-child(even) {
    flex-flow: column wrap;
  }
}

.img {
  width: 100%;
  height: 240px;
  background-color: #d1dde3;
}

.txtarea {
  width: 100%;
  padding: 24px 24px 48px;
  background-color: #eee;
  box-sizing: border-box;
}

.txt {
  font-size: 16px;
  line-height: 24px;
}

.link {
  font-size: 14px;
  line-height: 21px;
  text-decoration: underline;
}

@media all and (min-width: 480px) {
  
  .item {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: stretch;

    &:nth-child(even) {
      flex-flow: row-reverse wrap;
    }
  }

  .img {
    width: 50%;
  }

  .txtarea {
    width: 50%;
  }
}