html - モバイルまたはタブレット ビューで Div の配置を変更できますか (Bootstrap)

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>