html - CSS:3 或 4 列，具体取决于设备方向

Question

我想实现以下目标:我总共有 12 个 div，在一个 div 中。 根据媒体查询(平板电脑纵向、平板电脑横向、移动纵向、移动横向等)，我想显示内部有四个 div 的三列或内部有三个 div 的四列。

这应该是最终结果:

3 列，每列四个 div

4 列，每列三个 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 括起来，这将是一个 block ，带有 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>