Как выровнять блоки?

Question

[Mesuti]

Привет!
Как сделать аккуратное адаптивное складывание блоков?
Вроде все на flex делаю, а все равно все деревянное
Песочница jsFiddle
И чтобы цифры не складывались? width:50px не работает

Answer 1

[Никита Егоров]

https://jsfiddle.net/Svupol/kscjx827/31/

Comments

[Mesuti]

В Вашем примере цена под название сразу уехала.
Подскажете, как выстроить в линию? Чтобы цена не ломалась, а была фиксированная ширина?

[Никита Егоров]

Александр Сорокин, https://jsfiddle.net/Svupol/kscjx827/35/

[Mesuti]

Никита Егоров, спасибо! очень интересный подход.

Answer 2

[Beeetle]

Для "складывания" блоков

@media screen and (max-width: 420px) { 
.table-item{
        flex-direction: column;
}
    }

Comments

[Никита Егоров]

здесь не нужны медиа запросы, это flex'ы

[tema_sun]

Никита Егоров, как это связано? Я бы тоже брейкпоинт поставил и сменил дирекшн в определенный момент, т.к. врап не очень выглядит в данном случае. Хотя с другой стороны, совершенно непонятно чего хочет ОП,