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

Question

我想实现以下目标：我在一个div中总共有12个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，它是一个块，浮点数：左（见图：4列，每列三个div），这使得四列相邻。

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

如果有帮助，我可以使用Bootstrap3。

Answer 1

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;