How to move div to another row on mobile? - html

Question

Is it possible in bootstrap to move div from one row to another?
I need something like this:
Desktop/tablet:
-----------------------------
|Brand |search| #row1
-----------------------------
|Menu: | MAIN CONTENT |
|-link 1| | #row2
|-link 2| |
|-link 3| |
------------------------------
Mobile:
-----------
|Brand | #row1
-----------
|Menu: =|
|-link 1 | #row2 (expanding/collapsing navbar with menu and search form)
|-link 2 |
|-link 3 |
| search |
| |
| Main |
| content | #row2
| ... |
| ... |
-----------
On mobile, i need to move search form from #row1 to collapse menu in #row2.

Answer 1

Unfortunately, no. There's no way to accomplish this as you currently have it. One possible compromise would be to have the original search box become invisible at a certain screen size and have another search box, identical in functionality, that is shown where you need it at that point. For example:
<div class="row">
<div class="col-xs-12 col-sm-6">
Brand
</div>
<div class="col-sm-6 hidden-xs">
<input type="text" class="form-control"/>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">
<ul class="menu">
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
<div class="visible-xs-block">
<input type="text" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-8">
<main>Main Content</main>
</div>
</div>
Obviously you don't want to make a habit of this kind of thing, but sometimes the optimal layout requires you to do things like this.

Answer 2

Gah lost all my rep opening a Bounty and now I can't comment.
Would it be a viable option to start using a framework? Not to promote any framework in particular but personally I started using Zurb Foundation for the reason you have described alone. http://foundation.zurb.com/