html - 我们可以更改 Div 在手机或平板电脑视图中的位置吗（引导程序）

Question

我想更改 div 的顺序。我所拥有的是.. (HTML)

<div class="header"></div>
<div class="navgtn-menu"></div>
<div class="search-bar"></div>

现在我想要移动视图中 nvgtn-menu div 上方的搜索栏 div？有什么选择吗？或任何技巧？

Answer 1

这是我的建议：

使用 css3的弹性顺序：

<div class="core">
<div class="header"></div>
<div class="navgtn-menu"></div>
<div class="search-bar"></div>
</div>

在移动媒体查询中：：

.core {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
 }

.navgtn-menu {
-webkit-box-ordinal-group: 3;  
-moz-box-ordinal-group: 3;     
-ms-flex-order: 3;     
-webkit-order: 3;  
order: 3;
}

.search-bar {
-webkit-box-ordinal-group: 2;  
-moz-box-ordinal-group: 2;     
-ms-flex-order: 2;     
-webkit-order: 2;  
order: 2;
}

唯一的问题是这在 IE9 或更低版本中不起作用......

如果不是，则js 追加以更改顺序或在其下方复制它

$( $('.search-bar').html() ).appendTo('.mobile-move');

看起来像：

    <div class="core">
    <div class="header"></div>
   <div class="mobile-move"></div>
    <div class="navgtn-menu"></div>
    <div class="search-bar"></div>
    </div>  

这样它只会复制，但使用 css 媒体查询，您可以隐藏/显示它。

Answer 2

像这样 ：）

<div class="header"></div>
<div class="search-bar"></div>
<div class="navgtn-menu"></div>