次の簡単なマークアップがあります。
<div class="container">
<div class="row">
<div class="span8">
<!- Main page -->
</div>
<div class="span4 visible-desktop">
<!- Right-hand Sidebar -->
</div>
</div>
</div>
基本的に、私が望むのは、デスクトップ以外のデバイスのサイドバーを削除して、メイン ページが幅全体を占めるようにすることだけです。
マークアップを使用すると、サイドバーは小さな画面 (タブレットなど) では見えなくなりますが、メイン ビットは画面全体に広がっておらず、白い隙間が残るだけです。
非常に小さな画面 (モバイルなど) では、サイドバーは正しく非表示になります。
マークアップ/スタイルを変更して、タブレット デバイスで必要なように動作させるにはどうすればよいですか?
(jQueryがオプションであることは知っていますが、可能であればjs以外のアプローチを好むでしょう)