Changing to vertical menu when shrinking browser width - css

Question

I've started using Twitter Bootstrap, and have implemented a responsive nav that changes to a foldable menu if viewed in on a mobile (or shrinking the browser windows width).
This is how it looks right now:
What I want is the menu items to be listed under each other left of the login form, instead of horisontal as it is now. Is there an easy way to do this with Twitter Bootstrap?
Here's my nav code: (I haven't changed the original css):
<div class='navbar'>
<div class='navbar-inner'>
<div class='container-fluid'>
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class='brand'>Test</a>
<ul class='nav nav-collapse collapse'>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 2</a></li>
<li><a>Item 2</a></li>
</ul>
<ul class='nav nav-collapse collapse pull-right'>
<li class=""><form class="navbar-search">
<input type="text" class="span2" placeholder="Login">
<input type="text" class="span2" placeholder="Password">
<input type="submit" value="Login" class="btn"/>
</form></li>
</ul>
</div>
</div>
</div>

Answer 1

Since the LI's are probably floated or defined as inline-block, you need to change their CSS rule to clear:both or display:block respectively. Then you need to float the entire menu to the left, and the login form to the right.
You can make those changes responding to the resize event, using JQuery's css method

Answer 2

Per the twitter bootstrap docs everything that you want hidden and formatted correctly needs to be put within <div class="nav-collapse collapse">{your nav items}</div>
<div class='navbar'>
<div class='navbar-inner'>
<div class='container-fluid'>
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class='brand'>Test</a>
<!-- ALL MY NAVIGATION IN HERE -->
<div class='nav-collapse collapse'>
<ul class='nav'>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 2</a></li>
<li><a>Item 2</a></li>
</ul>
<form class="navbar-search pull-right">
<input type="text" class="span2" placeholder="Login">
<input type="text" class="span2" placeholder="Password">
<input type="submit" value="Login" class="btn"/>
</form>
</div>
</div>
</div>
</div>
Just moving your html around without adding any css or javascript will do the trick.:)
Here is a jsfiddle for it: http://jsfiddle.net/hajpoj/Z3wqL/3/