How to overthrow the annex for PCs and mobile gadgets by @media

[Jolied]

Desktop

a Mobile below

[yajahira]

Example

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