CSS: 3 или 4 столбца в зависимости от ориентации устройства

Question

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

Это должны быть конечные результаты:

3 столбца, четыре деления на столбец

4 столбца, три деления на столбец

У меня проблемы с поиском способа добиться этого только с помощью CSS.

<div className="cb-Categorie-Wrapper">
    <div className="cb-Categorie" id="categorie-Fictie"><span className="label">Fictie</span></div>
    <div className="cb-Categorie" id="categorie-Thrillers-spanning" ><span className="label">Thrillers en spanning</span></div>
    <div className="cb-Categorie" id="categorie-Romantiek"><span className="label">Romantiek</span></div>

    <div className="cb-Categorie" id="categorie-Kinderen-YA"><span className="label">Kinderen en YA</span></div>
    <div className="cb-Categorie" id="categorie-Non-fictie"><span className="label">Non-fictie</span></div>
    <div className="cb-Categorie" id="categorie-Reizen"><span className="label">Reizen</span></div>

    <div className="cb-Categorie" id="categorie-Mens-ontwikkeling"><span className="label">Mens en ontwikkeling</span></div>
    <div className="cb-Categorie" id="categorie-Management"><span className="label">Management</span></div>
    <div className="cb-Categorie" id="categorie-Educatief"><span className="label">Educatief</span></div>

    <div className="cb-Categorie" id="categorie-Engels"><span className="label">Engelse boeken</span></div>
    <div className="cb-Categorie" id="categorie-Anderstalig"><span className="label">Andere anderstalige boeken</span></div>
    <div className="cb-Categorie" id="categorie-Non-books"><span className="label">Non-books</span></div>
</div>

Я заключил каждые три деления в div-обертку, которая была бы блоком, с плавающей точкой: left (см. Рисунок: 4 столбца, три деления на столбец), это сделало четыре столбца рядом друг с другом.

Но теперь хотелось бы, чтобы столбцы были как на рисунке 1 (3 столбца, четыре деления).

Я могу использовать Bootstrap3, если это полезно.

Answer 1

.column-example {
    column-count: 4;
column-rule-style: solid;
column-rule-color: #ff0000;
}

<div class="column-example">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>