Направить столбцы сверху вниз

[semen78]

Всем привет! 
Есть менюшка с таким кодом:

 <style type="text/css">
    .item {
    width: 24%;
    vertical-align: top;
    display: inline-block;
    font-size: 115%;
    padding: 5px 5px 5px 5px;
    font-size: 1rem;
    color: #333;
    }
    .item a {
    color: #333;
    }
    .subfolders {
    padding: 25px 25px 25px 25px;
	margin-bottom:30px;
	border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.35rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    }
	@media (max-width: 768px) { 
	.item {
    width: 49%;
	}
	}
  </style>

<div class="subfolders">
<div class="item"><a href="/aksessuary-dlya-acura">ACURA</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-audi">AUDI</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-bmw">BMW</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-byd">BYD</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-brilliance">BRILLIANCE</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-cadillac">CADILLAC</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-changan">CHANGAN</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-chery">CHERY</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-chevrolet">CHEVROLET</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-citroen">CITROEN</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-daewoo">DAEWOO</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-datsun">DATSUN</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-fiat">FIAT</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-ford">FORD</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-geely">GEELY</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-great-wall">GREAT-WALL</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-haval">HAVAL</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-honda">HONDA</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-hyundai">HYUNDAI</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-infiniti">INFINITI</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-jeep">JEEP</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-kia">KIA</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-lada">LADA</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-land-rover">LAND ROVER</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-lexus">LEXUS</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-lifan">LIFAN</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-mazda">MAZDA</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-mercedes-benz">MERCEDES</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-mitsubishi">MITSUBISHI</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-nissan">NISSAN</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-opel">OPEL</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-peugeot">PEUGEOT</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-porsche">PORSCHE</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-ravon">RAVON</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-renault">RENAULT</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-skoda">SKODA</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-ssangyong">SSANGYONG</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-subaru">SUBARU</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-suzuki">SUZUKI</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-toyota">TOYOTA</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-volkswagen">VOLKSWAGEN</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-volvo">VOLVO</a></div>

<div class="item"><a href="/avtoaksessuary-dlya-uaz">UAZ</a></div>
</div>

 

 

Как видно на скрине, марки идут слева на право строками, а мне нужно сделать столбиками как отмечено красным шрифтом.

Нарыл решение с таким кодом, но не могу соединить со своими стилями (что бы в моб версии было 2 столбца и тд)

Может кто напишет как это должно выглядеть?

 

 

div {
  display: inline-flex;
  flex-flow: column wrap;
  align-items: flex-start;
  align-content: flex-start;
  height: 100px;
}

span {
  margin: 5px;
  flex: 0 1 auto;
  align-self: flex-start;
}
<div>
  <span>word 1</span>
  <span>word 2</span>
  <span>word 3</span>
  <span>word 4</span>
  <span>word 5</span>
  <span>word 6</span>
  <span>word 7</span>
  <span>word 8</span>
  <span>word 9</span>
</div>

 

 

[buslikdrev]

Отправил в лс.