html - xs screen のときにブートストラップの異なる列が一緒になる

Question

5 つの異なる列があります。

<div class="row">

  <div class="col-sm-3 col-xs-6"></div>

  <div class="col-sm-2 col-xs-6"></div>

  <div class="col-sm-2 col-xs-6"></div>

  <div class="col-sm-2 col-xs-6"></div>

  <div class="col-sm-3 col-xs-6"></div>

</div>

すべてのコンテンツに がwidth: 100%あるため、サイズは予想より大きくなく、padding: 0px.

画面が XS (小型デバイス) の場合、列 (「ワクチン/チップ」) の 1 つが他の列の下に留まり、次の行に渡されて構造が破壊されます。

以下の画像が役立ちます：

大画面 (lg)

電話画面 (xs)

コード：

<div class="row" id="filters">

  <hr class="hr-between-animals" />

  <div class="col-sm-3 col-xs-6" style="margin-top:10px; padding:0">
    <b>Type of animal:</b>
    <br />
    <input type="checkbox" /> Dog
    <br />
    <input type="checkbox" /> Cat
    <br />
    <input type="checkbox" /> Rabbit
    <br />
    <input type="checkbox" /> Reptil
    <br />
    <input type="checkbox" /> Bird
    <br />
    <input type="checkbox" /> Fish
    <br />
    <input type="checkbox" /> Rat
  </div>

  <div class="col-sm-2 col-xs-6" style="margin-top:10px; padding:0">
    <b>Size:</b>
    <br />
    <input type="checkbox" /> Small
    <br />
    <input type="checkbox" /> Medium
    <br />
    <input type="checkbox" /> Large
    <br/>
  </div>

  <div class="col-sm-2 col-xs-6" style="margin-top:10px; padding:0">
    <b>Vaccines/Chip:</b>
    <br />
    <input type="checkbox" /> Vaccines
    <br />
    <input type="checkbox" /> Chip
  </div>

  <div class="col-sm-2 col-xs-6" style="margin-top:10px; padding:0">
    <b>Gender:</b>
    <br />
    <input type="checkbox" /> Female
    <br />
    <input type="checkbox" /> Male
    <br />
    <br />
  </div>

  <div class="col-sm-3 col-xs-6" style="margin-top:10px; padding: 0">
    <b>Age:</b>
    <br />
    <input type="text" id="amount" readonly style="border:0; color:#3D3D3D; background-color:transparent" />
    <div id="slider-range" style="border-color:#3D3D3D; border-          radius:5px; margin-top:10px"></div>
  </div>

</div>