Как сверстать приложение для ПК и мобильных гаджетов с помощью @media

* {
  box-sizing: border-box;
}

.items {
  display: flex;
  flex-wrap: wrap;
  padding: 1em;
}

.items__col:nth-of-type(2),
.items__col:nth-of-type(3) {
  margin-left: auto;
}

.items__elem {
  border: 1px solid #000;
  display: inline-block;
  min-width: 100px;
  text-align: center;
  margin: 5px;
}

@media (max-width:767px) {
  .items__col:nth-of-type(1),
  .items__col:nth-of-type(4) {
    width: 100%;
  }
  .items__col:nth-of-type(2) {
    margin-left: 0;
  }
}

<div class="items">
  <div class="items__col">
    <div class="items__elem">1</div>
  </div>
  <div class="items__col">
    <div class="items__elem">2</div>
  </div>
  <div class="items__col">
    <div class="items__elem">3</div>
  </div>
  <div class="items__col">
    <div class="items__elem">4</div>
  </div>
</div>