bootstrap.css - How to hide sidebar when mobile? -

i trying realize layout bootstrap.css. main view right sidebar. looks great on desktop, trying remove sidebar when have mobile view. layout looks this:

<div class="container-fluid">    <div class="row-fluid">       <div class="span9">          main view goes here       </div>       <div class="span3 visible-desktop visible-tablet hidden-phone">          sidebar goes here       </div>    </div> </div> 

so when have mobile view, sidebar disappears. main view still has span9 class, causing whole view having whitespace right. experiencing on iphone 4 mobile safari.

i no css guru , work on backend of webapps, time want right, because personal blog. can check out mean "whitespace" @ my blog. know navbar isn't pretty @ now, next thing i'll fix.

check on www.responsinator.com guess there no such white-spacing right. row-fluid class of bootstrap converts every child span class full width when site opened on other device except desktop. in case, width:100% assigned span9 when open on iphone4.

there seems little space on right cuz of 2 reasons probably:
1. text not justified.
2. container-fluid adds padding of 20px left right.

hope helps. :)