Bootstrap的 responsive.css在移动端显示问题

　　最近自己试图搭一个简单的搜索引擎(基于Sphinx，PS：中文分词神马费脑筋的自然需要另外的开源Project)。：）

简单来说，主要是用来索引一些文档，并进行一些简单的检索。后台PHP神马的没啥说的，前端采用了曾经路边听来的Bootstrap（好了，不贴链接了）作为基础框架。但是由于对jquery就半懂不懂，对css就更是处于了解的阶段，于是只能照着Bootstrap的Doc慢慢的磨。　　

　　用Chrome浏览的界面是这个样子的（当然，这个完全是demo版的 =。=）：

　　然而不幸的是，用模拟器登录之后看到的界面就是

　　可以看到上面的导航条，由于Bootstrap的Responsive utility classes已经更改了css，但是中间那一坨- -，Hero-unit却很不好看。

<div class = "span8 offset3 placehover hero-unit">
<h1>You Own Search Engine</h1>
<p class="pull-right">Search Now</p>
</div>

　　然后想到的一个比较笨的方法就是再设计一个小Logo，不采用hero-unit 然后再上面那个div 的class后面再加一个 hidden-phone属性，就在移动端显示另外一个Logo。。

　　对于bootstrap，楼主完全是新手，各位朋友对此可以给楼主一点帮助吗？:)