要素の順番を入れ替える方法

タブレットやスマホではユーザーエージェントを判定して下記を読み込ませないページにしたいです。
cssのメディアクエリに合わせるために、width:960px以下までを無効にしたいのですが適応されてしまっています。
どうすればいいでしょうか？

追加
文書をはしょりすぎました。
意図を汲んでくれた方ありがとうございます。一応補足でこんな感じにwebサイト作りたいです。

上記のようにPC版だけにナビと画像を入れ替えたいです。
cssのOrderも試したのですが、うまくいかなかったので下記で試したのですが
タブレットにも適応されてしまい困ってました。

ご提案頂いた、下記でやってみたのですが、960以下でも入れ替わりができてしまいます。
どうすればいいでしょうか？

<script>
if (window.matchMedia("(min-width: 960px)").matches){
    var a=document.getElementsByClassName('a')[0],
        b=document.getElementsByClassName('b')[0],
        c=b.nextSibling;
        a.parentNode.insertBefore(b,a);
        c.parentNode.insertBefore(a,c);

  } 

</script>

追加02
HTMLはこんな感じです。
テンプレ作成でデザインのみ違うバージョンを複数作らないといけないので
HTMLの方はいじれません。
cssやjsで対応し、レスポンシブで作成です。

    <header>
        <div id="header_innerBox">
            <div class="logoBox">
                <p>テキスト｜テキスト</p>
                <h1 class="logo">
                        <a href="index.html"><img src="images/rogo.png" alt="ロゴ" class="shape"></a>
                </h1>
            </div>


            <div class="telnoBox">
                <p class="booking">
                    <a href="テキスト.html">予約制</a>
                </p>
                <a href="tel:0000000">
                    <i class="fas fa-phone fa-2x"></i>
                </a>

                <p class="telno pc">
                    <span class="none">00-000-0000</span>
                    <span class="time">00：00～00：00 / 00：00～00：00</span>
                    <span class="time color">休診［・・］</span>
                </p>
            </div>
            <!--telnoBox-->
        </div>
        <!--header_innerBox-->


        <div class="telno sp">
            <span class="none">123-456-8912</span>
            <span class="time">00：00～00：00 / 00：00～00：00</span>
        </div>

        <div class="gnav_bg a">
        <nav id="global-nav">
 
            <ul>
                <li>
                    <a title="ABOUT" href="テキスト.html">テキスト</a>
                </li>
                <li>
                    <a title="DOCTOR&STAFF" href="テキスト.html">テキスト</a>
                </li>

                <li>
                    <a title="CLINIC" href="テキスト.html">テキスト</a>
                </li>

                <li>
                    <a title="MEDICAL" href="テキスト.html">テキスト</a>
                </li>

                <li class="spbr">
                    <a title="ABOUT" href="テキスト.html">テキスト</a>
                </li>
                <li class="spbr basis">
                    <a title="CONTACT" href="テキスト.html">テキスト</a>
                </li>
            </ul>
        </nav>
    </div>
    </header>





    <div id="mainVisual" class="Visual_width b">


        <div class="slide">

            <!-- Slider main container -->
            <div class="swiper-container">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                    <!-- Slides -->

                    <div class="swiper-slide">
                        <figure>
                            <img src="images/main.jpg" alt="メイン画像">
                        </figure>
                    </div>
                    <div class="swiper-slide">
                        <figure>
                            <img src="images/main.jpg" alt="メイン画像">
                        </figure>
                    </div>
                    <div class="swiper-slide">
                        <figure>
                            <img src="images/main.jpg" alt="メイン画像">
                        </figure>
                    </div>

                </div>
            </div>
        </div>

        <p>テキスト
        </p>

        <p class="textSub">テキスト</p>

    </div>

    <section class="Catchcopy">
テキスト
    </section>

PCのみ#mainVisualと#global-nav部分の入れ替えしたいのですが、cssでできますでしょうか？

mather

2018/07/05 06:27

JSが動くことで何が問題で、どうなっていて欲しいのかを具体的に記載してください。メディアクエリで仮に非表示になっていても要素はあるのでJSが動くことは特に問題ないと思うのですが。

mather

2018/07/05 06:33

というのと、質問のタイトルと内容がぜんぜん一致していないように見えます。

yoshinavi

2018/07/06 01:48

質問を理解していないかもですが、CSSの設定次第では？当初考えていたCSSも提示されると、より良い回答を得れると思います。

行動規範の内容に同意します

回答4件

matchMedia()で判定できます。

JavaScript
1if (window.matchMedia("(min-width: 960px)").matches) {
2  // 処理。
3}

window.matchMedia()
https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia

-- 16:56 960pxを含んでいたので訂正。

JavaScript
1if (!window.matchMedia("(max-width: 960px)").matches) {
2  // 処理。
3}

投稿2018/07/05 06:51

編集2018/07/05 07:57

x_x

総合スコア13749

kawakami_kk

2018/07/05 08:21

ありがとうございます。一応やりたいことは再現できたのですが、リアルタイムでブレイクポイントのブラウザの幅に合わせて、表示を確認するとPC版のがそのまま表示されます。(F５押せば解消されますが)メディアクエリみたいにブラウザでSPやタブレットのブレイクポイントまで狭めてf5押さずにスムーズには切り替えるのは難しいでしょうか？

x_x

2018/07/05 08:28

resizeイベントがあるので、そのたびに処理すればいいです。 https://api.jquery.com/resize/ ただ、入れ替える方法では前回がどうだったのか判定しなければなりません。

kawakami_kk

2018/07/05 09:10 編集

ありがとうございます。下記で試してみたのですが、ブラウザを狭めるたびに入れ替えた要素が交互に表示・非表示を繰り返しててなんだか微妙です。下記だけでは不十分でしょうか？ window.addEventListener('resize', function (event) { if(window.matchMedia('(min-width: 960px)').matches) { var a=document.getElementsByClassName('a')[0], b=document.getElementsByClassName('b')[0], c=b.nextSibling; a.parentNode.insertBefore(b,a); c.parentNode.insertBefore(a,c); } });

x_x

2018/07/05 09:18

なので、入れ替え済みかどうかをフラグで持たなければならないでしょう。入れ替えたあと小さくしたら戻さなければなりませんし

x_x

2018/07/05 09:24

var isPc = false; window.addEventListener('resize', function (event) { var match = !window.matchMedia("(max-width: 960px)").matches; if (match !== isPc) { // Swap処理. } isPc = match; });

x_x

2018/07/05 09:27

今回HTMLが提示されなかったので挙げませんでしたが、場合によってはCSSだけで解決するかもしれません

kawakami_kk

2018/07/05 09:47

度々すみません。HTML部分も追加してみたので、お時間あればよろしくお願いします

行動規範の内容に同意します

CSSだとこんな感じでしょうか？理解を間違っていたらスミマセン。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width,initial-scale=1.0">
6<title>example</title>
7<style>
8* {
9  margin: 0;
10  padding: 0;
11
12}
13
14.box_flex {
15  margin-top: 50vh;
16  display: flex;
17  width: 100%;
18  flex-direction: column;
19  align-items: center;
20  justify-content: center;
21  transform: translate(0,-50%);
22  background-color: lightgrey;
23
24}
25
26.box_img {
27  width: 40vw;
28  height: 20vw;
29  background-color: skyblue;
30  order: 1;  
31
32}
33
34.box_img2 {
35  width: 40vw;
36  height: 20vw;
37  background-color: skyblue;
38  background-color: lightcoral;
39  order: 1;  
40
41}
42
43.box_nav {
44  width: 60vw;
45  height: 5vw;
46  background-color: lightgreen;
47  order: 1;
48
49}
50
51@media screen and (min-width: 961px) {
52  .box_img2 {
53    display: none;
54  }
55
56}
57
58@media screen and (max-width: 960px) {
59  .box_img {
60    display: none;
61  }
62
63  .box_nav {
64    order: -1;  
65  }
66
67}
68</style>
69</head>
70<body>
71
72<div class="box_flex">
73  <div class="box_img">PC画像</div>
74  <div class="box_img2">SP画像</div>
75  <div class="box_nav">ナビゲーション</div>
76</div>
77
78</body>
79</html>