CSS отзывчивый два столбца с несколькими строками в один столбец

Question

Я бы связал изображение, но у меня нет программы графического интерфейса на этом компьютере.

Итак, каков наилучший способ добиться следующего.

 COLUMN 1 title     COLUMN 2 TITLE
 COLUMN 1 PIES      COLUMN 2 SNEAKERS
 COLUMN 1 TIRES     COLUMN 2 GUITARS

А когда экран свернут, он меняется на следующую структуру.

 COLUMN 1 title     
 COLUMN 2 TITLE
 COLUMN 1 PIES      
 COLUMN 2 SNEAKERS
 COLUMN 1 TIRES     
 COLUMN 2 GUITARS

Колонки в основном застегиваются. Какой, по вашему мнению, лучший подход здесь, чтобы выполнить то, что мне нужно? CSS не моя сильная сторона. Гибкий заказ?

Answer 1

Вы можете попробовать это в css, если хотите использовать css-flex

.box {
  display: flex;
  justify-content: center;
  flex-flow: row nowrap;
}

.part-1,
.part-2 {
  flex: 0 0 50%;
}

@media screen and (max-width:768px) {
  .box {
    flex-flow: column nowrap;
  }
}

<div class="box">
  <div class="part-1">
    COLUMN 1 title
  </div>
  <div class="part-2">
    COLUMN 2 TITLE
  </div>
</div>
<div class="box">
  <div class="part-1">
    COLUMN 1 PIES
  </div>
  <div class="part-2">
    COLUMN 2 SNEAKERS
  </div>
</div>
<div class="box">
  <div class="part-1">
    COLUMN 1 TIRE
  </div>
  <div class="part-2">
    COLUMN 2 GUITARS
  </div>
</div>

СВЯЗЬ FIDDLE

Answer 2

Поскольку вы не являетесь экспертом в CSS, я рекомендую вам использовать CSS-фреймворк, такой как bootstrap, это будет самый простой способ достичь того, чего вы хотите.

<div class="container">

  <div class="row">

    <div class="col-sm-6">
      <p>COLUMN 1 title</p>
      <p>COLUMN 1 PIES</p>
      <p>COLUMN 1 TIRES</p>
    </div>

    <div class="col-sm-6">
      <p>COLUMN 2 TITLE</p>
      <p>COLUMN 2 SNEAKERS</p>
      <p>COLUMN 2 GUITARS</p>
    </div>    

  </div>
</div>

Здесь вы можете найти больше информации о вашей системе компоновки сетки: https://getbootstrap.com/docs/4.0/layout/grid/