jquery - Adjusting page elements position layout using twitter bootstrap specific to mobile devices -

I am creating a search box that looks on a desktop browser:

And it currently looks like on a mobile browser:

The UI elements given in the question The code looks like the following:

  & lt; Div role = "tabpanel" class = "tab-panel active" id = "adult" & gt; & Lt; H4 & gt; Adult Tickets & lt; / H4 & gt; & Lt; Form class = "navbar-form" role = "search" action = "/ search" method = "go" & gt; & Lt; Div class = "input-group" & gt; & Lt; Input type = "text" class = "form-control" placeholder = "search for an event" name = "q" id = "q" & gt; & Lt; Div class = "input-group-btn" & gt; & Lt; Div class = "btn-group" role = "group" & gt; & Lt; Button type = "button" class = "btn btn-default dropdown-toggle form-control" data-toggle = "dropdown" aria-expanded = "false" & gt; & Lt; Span data-bind = "label" & gt; All adult categories & lt; / Span & gt; & Lt; Input type = "hidden" name = "category" id = "category" value = "all adult categories" & gt; & Lt; Span class = "carat" & gt; & Lt; / Span & gt; & Lt; / Button & gt; & Lt; Ul class = "dropdown menu menu-scroll" role = "menu" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; All adult categories & lt; / A & gt; & Lt; / Li & gt; & Lt;% @ Adult Categories.Each | Category | & Gt%; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt;% = Category name% & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt;% end% & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Button class = "btn btn-default" type = "submit" & gt; & Lt; I class = "fa-search" & gt; & Lt; / I & gt; & Lt; / Button & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Form & gt; & Lt; / Div & gt;  

I need to clear the mobile browser view. I think it would be best to search that the text box was on its line - and consumed its line on mobile, and then the category dropdown box below search term box With the actual search button on its right

Basically the 3 UI elements, the search text box, the button dropdown, and splitting the search button into two rows, the first line between the first search term and the category dropdown and the search button is divided between them. I do not particularly want to adjust to see the desktop version - so one such method is that I can apply for mobile devices using CSS - or something I want to get this behavior in the Dome Can I change look at this desktop version?

You must isolate your search box and dropdown menu / button by using the bootstrap column Forget the bootstrap, if the elements are not fit on the screen, then it stacks them up a small belle for your code -

  & quot; Div role = "tabpanel" class = "tab-panel active" id = "adult" & gt; & Lt; H4 & gt; Adult Tickets & lt; / H4 & gt; & Lt; Form class = "navbar-form" role = "search" action = "/ search" method = "go" & gt; & Lt; Div class = "input-group line" & gt; & Lt; Div class = "call-sm-5" & gt; & Lt; Input type = "text" class = "form-control" placeholder = "search for an event" name = "q" id = "q" & gt; & Lt; / Div & gt; & Lt; Div class = "col-sm-7" & gt; & Lt; Div class = "input-group-btn" & gt; & Lt; Div class = "btn-group" role = "group" & gt; & Lt; Button type = "button" class = "btn btn-default dropdown-toggle form-control" data-toggle = "dropdown" aria-expanded = "false" & gt; & Lt; Span data-bind = "label" & gt; All adult categories & lt; / Span & gt; & Lt; Input type = "hidden" name = "category" id = "category" value = "all adult categories" & gt; & Lt; Span class = "carat" & gt; & Lt; / Span & gt; & Lt; / Button & gt; & Lt; Ul class = "dropdown menu menu-scroll" role = "menu" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; All adult categories & lt; / A & gt; & Lt; / Li & gt; & Lt;% @ Adult Categories.Each | Category | & Gt%; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt;% = Category name% & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt;% end% & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Button class = "btn btn-default" type = "submit" & gt; & Lt; I class = "fa-search" & gt; & Lt; / I & gt; & Lt; / Button & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Form & gt;