有一个基于 CSS-Grid 的布局。我试图在其中制作 4 个区域，而不是使用命名，而是使用行方向。因此，当显示尺寸发生变化时，这些块以正确的顺序相互移动。但显然出了点问题。而且我不明白是怎么回事，告诉我那些在网格中知道的人。
正常模式下的布局：
缩小显示中的计划布局：
下面的代码片段和这里的codepen
.gridtest {
display: grid;
grid-template-columns: 100px 500px 100px 500px;
grid-template-rows: auto;
}
.h_icons {
font-family: Source Sans Pro;
position: relative;
right: 90px;
color: #226;
font-size: 25px;
outline: 2px;
outline-offset: 5px;
padding-left: 10px;
padding-right: 10px;
margin-top: 60px;
margin-bottom: -30px;
}
.h_icons::after {
content: "";
position: absolute;
bottom: 0px;
left: 110px;
width: 450px;
height: 2px;
background-color: #226;
right: 0px;
margin: -3px;
display block;
}
.icons {
content: "\f1c0";
font-family: FontAwesome;
position: relative;
text-align: center;
top: calc(50% - 55px);
color: #226;
font-size: 60px;
margin-top: 50px;
}
.text_icons {
font-family: Source Sans Pro;
text-align: justify;
font-size: 17px;
padding-left: 10px;
padding-right: 70px;
margin-top: 60px;
margin-bottom: 0px;
color: black;
}
@media (max-width: 575px) {
.gridtest {
display: grid;
grid-template-columns: 1fr;
grid-template-areas: 'one one' 'two two' 'three three' 'four four';
}
.one {
grid-column: 1 / 3;
grid-row: 1 / 5;
}
.two {
grid-column: 3 / 5;
grid-row: 1 / 5;
}
.three {
grid-column: 5 / 3;
grid-row: 5 / 7;
}
.four {
grid-column: 3 / 5;
grid-row: 3 / 7;
}
.h_icons {
font-family: Source Sans Pro;
grid-row: 1
}
.h_icons::after {
content: "";
display: none;
}
.icons {
font-family: Source Sans Pro;
font-size: 30px;
text-align: left;
}
.text_icons {
font-family: Source Sans Pro;
text-align: justify;
margin-top: 0px;
padding-right: 0px;
}
}<div class="GridTest">
<div class="h_icons">
</div>
<div class="h_icons">
<p>
<h2>Услуги для современного бизнеса</h2>
</p>
</div>
<div class="h_icons">
</div>
<div class="h_icons">
<p>
<h2>У задач есть решение</h2>
</p>
</div>
</div>
<div class="GridTest">
<div class="icons">
<i class="fas fa-users"></i>
</div>
<div class="text_icons">
<p>Для тех, кому нужно объединить свои офисы в одну корпоративную виртуальную частную сеть (IP-VPN over Internet), где Интернет выступает в роли опорной сети.</p>
</div>
<div class="icons"><i class="fas fa-network-wired"></i>
</div>
<div class="text_icons">
<p> Удаленный доступ (RDP, TeamViewer, служебные приложения типа клиент-сервер)</p>
</div>
</div>
<div class="GridTest">
<div class="icons"><i class="fas fa-helicopter"></i>
</div>
<div class="text_icons">
<p>Для тех, кому нужна связь на удаленных рабочих местах (месторождения, места лесозаготовки, small office, рабочие места для учеников с ограниченными возможностями малокомплектных школ, фельдшерско-акушерские пункты и т.д.).</p>
</div>
<div class="icons">
<i class="fas fa-cloud-upload-alt"></i>
</div>
<div class="text_icons">
<p>Доступ к приложениям и услугам Интернет - государственным порталам, банкам, облачным приложениям и хранилищам, информационным и поисковым порталам, развлекательным ресурсам.</p>
</div>
</div>
<div class="GridTest">
<div class="icons"><i class="fas fa-globe"></i>
</div>
<div class="text_icons">
<p>Для тех, кому нужен доступ к телекоммуникационным и информационным ресурсам.</p>
<p class="gray">(более подробно см. <a target="_blank" href="https://www.sysat.ru/resheniya/">Решения</a>)
</p>
</div>
<div class="icons"><i class="fas fa-sync"></i>
</div>
<div class="text_icons">
<p>Обмен данными между пользователями через Интернет, включая электронную почту и электронный документооборот.</p>
</div>
</div>
<div class="GridTest">
<div class="h_icons">
</div>
<div class="h_icons">
<p>
<h2>Тарифы должны быть справедливыми</h2>
</p>
</div>
<div class="h_icons">
</div>
<div class="h_icons">
<p>
<h2>Дополнительные возможности</h2>
</p>
</div>
</div>
<div class="GridTest">
<div class="icons"><i class="fas fa-calculator"></i>
</div>
<div class="text_icons">
<p>
<b>СатисСвязь предлагает два типа тарификации:</b>
<br>
<br> - оплата за потребленный в течении месяца трафик — для тех, кто может и хочет контролировать расходы на трафик<br> - фиксированный ежемесячный платеж — для тех, кому важно планировать расходы
<br>
<br> Услуги включают в себя спутниковый интернет, видеонаблюдение, онлайн-трансляции, видео-конференц-связь, корпоративную спутниковую сеть связи и другое. Наши тарифы выгодны для передачи данных разного приоритета.
<br>
<br> Независимо от выбранной системы тарификации, вы сможете в полной мере использовать наши услуги. Если ваши задачи требуют более гибкого подхода, наши специалисты помогут разработать индивидуальное решение.
</div>
<div class="icons"><i class="fas fa-plus-square"></i>
</div>
<div class="text_icons">
<p><b>Фильтрация трафика</b> подходит для тех, кто хочет уменьшить затраты на связь за счет снижения нагрузки на каналы связи непрофильным трафиком.
<p class="gray">(более подробно см. <a target="_blank" href="/services/filtratsiya_trafika/">Фильтрация трафика</a>)</p>
<p>
<br>
<b>Приоритизация трафика</b> подходит для заказчиков с повышенными требованиями к качеству передачи определенного типа данных (передача данных различного типа трафика в соответствии со своими приоритетами).
<p class="gray">(более подробно см. <a target="_blank" href="/services/prioritizatsiya_trafika/">Приоритизация трафика</a>)</p>
<br>
<p><b>Аренда IP-адресов сети Интернет</b> подходит для тех, кому нужен доступ к серверам из Интернета (например, сервер видеонаблюдения, почтовый сервер, web-сервер и т.д.)</p>
<br>
<p><b>Детализация трафика</b> полезна для определения основных источников потребления трафика, например выявления и фильтрации паразитного трафика</p>
</div>
</div>