html5 - Making Bootstrap Nav-Pills Responsive -

There is some difficulty in making the following nav bullets responsive. The first 2 "hidden-phone" classes work fine and as they should, but when I decrease the screen size, the "View-phone" category is not visible below. Any help will be very much appreciated!

  & lt; Div class = "container" & gt; & Lt; Div class = "span3" & gt; & Lt; Div class = "hidden-phone" & gt; & Lt; A & gt; & Lt; Img src = img / logobanner.jpg alt = "Mobile Application Development, Mobile App Development, Mobile App Developer, Mobile App Developer, Beskko Mobile App, Social Media Agency London, Social Media Agency Manchester" & gt; ; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "hidden-phone" & gt; & Lt; Div class = "span5 offset7" & gt; & Lt; Ul class = "nav nav-pills" & gt; & Lt; Li class = "active" & gt; & Lt; A href = "index.html" & gt; Home & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "testimonials.html" & gt; Gallery & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "contact.html" & gt; Contact & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "http://resonate.so/blog" & gt; Blogs & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Div class = "span3" & gt; & Lt; Div class = "visible-phone" & gt; & Lt; Ul class = "navigable nav-pills nav-stack" & gt; & Lt; Li & gt; & Lt; A href = "testimonials.html" & gt; Gallery & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; Part of the layer example with    
 
 
 class  view-phone  Is the layer  hidden phone . I think that you have forgotten your predecessor  div  be careful with indentation!  
 This is my basic one:  
 Use the vertical splitter to shrink the view.