Как разделить ячейку на две части (перенести на следующую строку) используя Flexbox?

Question

[Taron4uk]

Подскажите, пожалуйста, с вопросом.
Есть таблица, которая на ПК выходит строчно, как показано на 1 скриншоте.

И требуется сделать по два элемента на каждую строчку, но в одной ячейке, чтобы было так, как показано на 2 скриншоте.

*надо сделать для мобильной версии данный вариант, но не могу понять как сделать это все из таблицы
дайте хотя-бы подсказку, прошу)
Заранее, спасибо огромное!

Comments

[origami1024]

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

[Alams Stoyne]

Так?

[Taron4uk]

Alams Stoyne, так, но так надо сделать не из DIV-ов, а из TD

[Taron4uk]

Alams Stoyne, не знаю даже, ничего в голову не приходит
именно надо настроить в css, чтобы по медиа запросам смещалась таблица в две строки одной ячейки

[Taron4uk]

div'ы почему-то запрещены, когда вставляю, он их неправильно вставляет

[Taron4uk]

хотел сделать по space-between строчку и ячейку обернуть в flex-direction: column и получилось бы хорошо, но не дает

Answer 1

[sergski]

на flex:

tr {
    display: flex;
    flex-wrap: wrap;
  
    td {
          flex-basis: 50%;
          box-sizing: border-box;
    }
}

Comments

[Taron4uk]

Спасибо огромное!

Answer 2

[Artem Ivanov]

media-запросы или готовые классы bootstrap, например , помогут вам в этом)

Comments

[Taron4uk]

да, это понятно, без media запросов никуда
но как именно сверстать так как я показал на скриншоте 2?

[Artem Ivanov]

Taron4uk, бустрап на борту или без него хотите ручками?

[Taron4uk]

Artem Ivanov, да, желательно без bootstrap'a вообще

[Artem Ivanov]

Taron4uk, тогда нужно сделать так называемые точки перелома сайта, если ширина меньше определенной -
flex-wrap: wrap ставить, а парам столбцов задавать минимальную ширину. её можно считать в процентах от экрана.

Answer 3

[Meakin]

display:flex;
flex-wrap: wrap;
на td
box-sizing:border-box;
flex-basis:45-50%;