css - 小さいブラウザ ウィンドウで span9 を span12 に変更するにはどうすればよいですか?

Question

次のようなレイアウトがあります。

<div class="container">
<div class="span9" ></div> <div class="span3" ></div>
</div>

ユーザーがタブレットまたはモバイル デバイスでページを表示しているときに、span9 div と span3 div の両方が span12 div になり、別の上に垂直に積み重ねられるようにしたいと考えています。

これを達成することはできますか？私の現在のソリューションは、小さなブラウザー ウィンドウに表示する 2 番目の div セットに依存しており、上記の div を非表示にしています。

Answer 1

Bootstrap 3 を使用すると、これは非常に簡単です。

<div class="col-md-9">...</div>
<div class="col-md-3">...</div>

通常のデスクトップ解像度 (> 992px) では、div は 9/12 列と 3/12 列になります。それより小さいものでは、12/12 になります。

Twitter Bootstrap 3 グリッド

---

Bootstrap 2.3.2 を使用すると、メディア クエリを追加できます。

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
  .span9, .span3 {
    display: block;
    float: none;
    width: 100%;
  }
}