html - 如何在移动设备上将 div 移动到另一行？

Question

是否可以在 Bootstrap 中将 div 从一行移动到另一行？ 我需要这样的东西:

台式机/平板电脑:

-----------------------------
|Brand               |search|   #row1             
-----------------------------
|Menu:  | MAIN CONTENT      |
|-link 1|                   |   #row2
|-link 2|                   |
|-link 3|                   |
------------------------------

手机:

-----------
|Brand    |    #row1
-----------
|Menu:   =|
|-link 1  |    #row2 (expanding/collapsing navbar with menu and search form)
|-link 2  |
|-link 3  |
| search  |
|         |
| Main    |
| content |    #row2 
| ...     |
| ...     |
-----------

在移动设备上，我需要将搜索表单从#row1 移动到#row2 中的折叠菜单。

Answer 1

不幸的是，没有。您目前无法完成此操作。一种可能的折衷方案是让原始搜索框在特定屏幕尺寸下变得不可见，并有另一个功能相同的搜索框，显示在您需要的位置。例如:

<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>
                <a href="link1"></a>
            </li>
            <li>
                <a href="link2"></a>
            </li>
            <li>
                <a href="link3"></a>
            </li>
            <li>
                <a href="link4"></a>
            </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>

显然你不想养成这种习惯，但有时最佳布局要求你做这样的事情。