CSS：3 或 4 列，取决于设备方向

Question

我想实现以下目标：我总共有 12 个 div，在一个 div 内。 根据媒体查询（平板电脑纵向、平板电脑横向、手机纵向、手机横向等），我想显示三列内有四个 div 或四列内有三个 div。

这应该是最终结果：

3 列，每列 4 个 div

4 列，每列 3 个 div

我在想办法仅使用 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 都用一个包装 div 包围，这将是一个块，带有 float:left（见图：4 列，每列三个 div），这使四列彼此相邻。

但现在希望将列作为图片 1（3 列，4 个 div）。

如果有帮助，我可以使用 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>