Вот таким образом это можно решить с помощью одного CSS
@media (max-width: 287px) {
.flexboxes {
width: auto;
height: auto;
}
.flexboxes .title {width:100px;height: 16px;order:1}
.flexboxes .img {width:100px;height:250px;order:2}
.flexboxes .text {width:100px;height:100px;order:3}
.flexboxes .button {width:40px;height: 16px;order:4}
}
.flexboxes {
display: flex;
flex-wrap: wrap;
flex-direction: column;
width: 288px;
height: 285px;
}
.flexboxes .block {
display: block;
font-family: arial;
padding: 10px;
border: 2px solid red;
font-weight: 700;
color: red;
margin:10px;
}
.flexboxes .title {width:100px;height: 16px;order:1}
.flexboxes .img {width:100px;height:250px;order:4}
.flexboxes .text {width:100px;height:100px;order:2}
.flexboxes .button {width:40px;height: 16px;order:3}
<div class="flexboxes">
<div class="block title">Title</div>
<div class="block text">Text</div>
<div class="block button">But</div>
<div class="block img">Img</div>
</div>