Как сделать правильно навигацию

[vladmih]

Есть такая навигация по сайту http://take.ms/DOWKs

Не могу приложить ума как ее правильно сделать и чтоб она еще была адаптивной.

Визуально я вижу навигацию в три колонки, которая в мобиле будет в одну колонку, но в первых трех колонках подраздели выровнены по одной линии (красные линии на скрине).
А как добиться этого при обычных трех колонка, я не могу понять, ибо они все будут подниматься к верху и вся сетка собьется.

Была мысль все тайтлы навигации и подразделы делать колонками, но в мобиле собьется логический порядок, а потом всех расставлять order-ом.
Вариант конечно не очень, ибо если пропадет тайтл или появится новый блок ссылок, то все ордеры собьются.

Или на js, искать по строкам самый высокий и все в ряду прописывать min-height, но js не хотелось бы...

Может у Вас есть какие-нибудь варианты?
 

[Switch74]

inline-block нет?
https://jsfiddle.net/gpq41zLk/

[vladmih]

  On 1/18/2018 at 8:58 AM, Switch74 said:

inline-block нет?
https://jsfiddle.net/gpq41zLk/

Expand  

Вы наверное не поняли суть проблемы...

Левая колонка buy идет с тремя подгруппами линков, так же и у sell и discover.
Если адаптировать эту страницу к мобиле, то колонки должны стать таким образом:

buy
блок ссылок
блок ссылок
блок ссылок
sell
блок ссылок
блок ссылок
блок ссылок
discover
блок ссылок
блок ссылок
блок ссылок

А с инлайблоками они просто стану друг под другом, а тайтлы будут сверху.

http://take.ms/Wpl0r
Вот примерно о чем я говорю все что в рамке должно быть одним блоком, чтоб в мобилу они пошли друг под друга

Edited January 18, 2018 by vladmih

[vladmih]

 Вот накидал пример. Но нужно чтоб ульки на одном уровне и не прыгали вверх в колонках.

Edited January 18, 2018 by vladmih

[Switch74]

если flex не вариант можно тупо 2 верстки сделать и показывать в зависимости от размера нужный блок
 

[vladmih]

  On 1/18/2018 at 10:24 AM, Switch74 said:

если flex не вариант можно тупо 2 верстки сделать и показывать в зависимости от размера нужный блок
 

Expand  

Вариант делать на флексе каждый тайтл, блок ссылок отдельно, а потом в мобиле проставлять order чтоб они встали нужный мне порядок. Но как по мне это костыль и совсем не гибкий.
Я поэтому и спрашиваю, может есть какой-то вариант более логичный который мне не пришел в голову...?