a45,
примерно так ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.wrap{
display: flex;
justify-content: space-between;
flex-wrap:wrap;
}
.block{
min-width:150px;
border:1px solid;
text-align: center;
}
@media screen and (max-width: 480px) {
.wrap{
justify-content: center;
}
.block:nth-child(1) {
order: 1;
}
.block:nth-child(2) {
order: 3;
margin-left: 25%;
margin-right: 25%;
}
.block:nth-child(3) {
order: 4;
margin-left: 25%;
margin-right: 25%;
}
.block:nth-child(4) {
order: 2;
}
}
@media screen and (max-width: 800px) {
.block:nth-child(1) {
order: 1;
}
.block:nth-child(2) {
order: 3; margin-left: calc(48vw - 75px);
margin-right: calc(48vw - 75px);
}
.block:nth-child(3) {
order: 4; margin-left: calc(48vw - 75px);
margin-right: calc(48vw - 75px);
}
.block:nth-child(4) {
order: 2;
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
</div>
</body>
</html>