css - 在较小的媒体查询中 Bootstrap div

Question

我目前连续显示 4 个 div。当窗口变小时，它变成 2 行，每行有 2 个 div。我正在尝试添加一个中间层，它在顶部折叠成 3 个 div(下面有额外的一个)

 <div class="row">
        <div class="col-xs-6 col-sm-3">
          <p>1</p>
        </div>
        <div class="col-xs-6 col-sm-3">
          <p>2</p>
       </div>
        <div class="col-xs-6 col-sm-3">
          <p>3</p>
        </div>
        <div class="col-xs-6 col-sm-3">
            <p>4</p>
        </div>
</div>

我曾尝试在 col-xs-6 和 col-sm-3 之间添加第 3 类，但未能成功。我不太确定围绕我正在尝试做的事情的术语 - 我认为这可能是我在寻找答案时遇到问题的原因

谢谢

Answer 1

我通过更新每个 div 以应用以下类来实现它:

col-md-3 col-sm-4 col-xs-6