iBird Rose

а зачем тебе тогда column-count? используй к примеру inline-block с шириной 25%

jsfiddle.net/drn2kgch/2

https://masonry.desandro.com/layout.html

до строки с .container идет reset css

https://jsfiddle.net/ktu0sdxd/

Ищи по запросу "beautify html"
Есть много чего - от расширений для браузеров, до плагинов для редакторов и IDE

отдельно каждому элементу стили задавать все равно придется.
так что располагай в одну линию любыми способами и задавай к примеру margin-top каждому элементу.

576 строка styles.css
Пропиши margin-right: 0; чтобы стало так:

@media (max-width: 400px) {
.town_for_offer {
    width: 100%;
    margin-right: 0;
}

Если не хочешь париться, то используй 4 версию. там по дефолту это есть getbootstrap.com/docs/4.0/layout/grid/#equal-width

https://codepen.io/joshcoody/pen/GqNdrL
https://jsfiddle.net/qL1dpg6j/

ну вот ты сам ответил на свой вопрос. исходи из проекта. если верстаешь "интернет магазине для которого несколько % клиентов могут вылиться в десятки тысячь долларов убытков.", то не используй flex. а в других случаях используй.