пока не может комментировать.
Хорошо, поскольку я вижу, что вы, вероятно, уже используете bootstrap (. Row, .col-lg-3). Я собираюсь предложить решение с учетом этого факта. а также.
В bootstrap вы можете связать значения столбцов. Это означает, что размер экрана будет соответствовать ближайшему / наиболее правильному условию.
В вашем случае вы можете просто использовать один класс col-sm-6 это означает, что столбцы будут в два раза меньше, пока экран не станет больше 576 пикселей, после чего они автоматически получат 100 %
<section class="sec-top">
<div class="clearfix" style=" background: linear-gradient(326deg, rgba(249,248,250,1) 0%, rgba(238,238,255,1) 0%, rgba(246,250,250,1) 100%);">
<div class="row">
<div class="column col-sm-6">
...
</div>
<div class="column col-sm-6">
...
</div>
</div>
</div>
</section>
путь не bootstrap:
- с cal c, а встроенный блок inline-блока вводит небольшую ширину в 2 пикселя для элементов
.column{
width: calc(50% - 2px);
display: inline-block;
}
@media screen and (max-width: 600px) {
.column
{
width: 100%;
}
}
с плавающими объектами вместе и без полей
.column{
width: 50%;
float:left;
}
@media screen and (max-width: 600px) {
.column
{
width: 100%;
}
}