Здесь выстраиваем адаптивные блоки в колонку, где можно разместить изображение или написать тематическое описание. Своим видом похоже на вид материалов, которые при прокрутки страницы показываются на современном сайте.
Создаем равномерное выравнивание блоков по ширине
HTML
Код
<div class="nsectetu-dipisicing conseq">
<div class="psam sasasaepm">
<div>
<img src="http://zornet.ru/ABVUN/Abaavag/icon_features_list.png" alt="ZorNet - портал для вебмастера" />
<h2>Title</h2>
<p>Описание</p>
</div>
<button>Название</button>
</div>
<div class="psam sasasaepm">
<div>
<img src="http://zornet.ru/ABVUN/Abaavag/icon_features_list.png" alt="Интересные решения для вебмастера" />
<h2>TНазвание</h2>
<p>Описание</p>
</div>
<button>Название</button>
</div>
<div class="psam sasasaepm">
<div>
<img src="http://zornet.ru/ABVUN/Abaavag/icon_features_list.png" alt="Создание и продвижение сайтов" />
<h2>Title</h2>
<p>Описание</p>
</div>
<button>Название</button>
</div>
CSS
Код
.nsectetu-dipisicing {
max-width: 1100px;
margin: 0 auto;
}
.psam {
margin: 3px;
padding: 8px;
text-align: center;
background: #bfb6b6;
}
@media(min-width:680px) {
.nsectetu-dipisicing {
display: flex;
}
.psam {
display: flex;
justify-content: space-between;
flex-direction: column;
flex-basis: 33%;
}
}
Демонстрация
