Выполнение скрипта при определенном разрешении

[wry]

Подскажите, пожалуйста, как запустить выполнение этого скрипта, при разрешении экрана 767 и меньше.

window.onload = function(){
    var b1 = document.getElementById("b1");
    var b2 = document.getElementById("b2");
    b1.parentNode.insertBefore(b2, b1);
}
Я так понимаю, надо куда-то впаять строку if (screen.width <= 767), но методом тыка, в этот раз, не вышло.

[Great Rash]

var mediaQuery = window.matchMedia('(min-width: 500px)');

if (mediaQuery.matches) {
  // я выполнюсь только если ширина экрана 500 или больше
}

 

[by chris]

function getWindowWidth() {
  return window.innerWidth || document.body.clientWidth;
}

if (getWindowWidth() <= 767) {
  console.log('success');
}

 

[wry]

Спасибо за ответы.

Great Rash, сделал так:

var mediaQuery = window.matchMedia('(min-width: 500px)');

if (mediaQuery.matches) {
  window.onload = function(){
    var b1 = document.getElementById("b1");
    var b2 = document.getElementById("b2");
    b1.parentNode.insertBefore(b2, b1);
}
}

Скрипт выполняется на всех разрешениях. 

by chris, ваш ответ, для меня, еще менее очевиден. Я совсем не секу в JS.

По задумке должно быть вот так:

<ul class="menu2">
<div id="b2">
<li>1</li>
<li>2</li>
</div>
</ul>

<ul class="menu1">
<li>3</li>
<li>4</li>
<div id="b1"></div>
</ul>

<!-- При разрешении меньше 768px -->

<ul class="menu1">
<li>3</li>
<li>4</li>
<div id="b1"></div>
<li>1</li>
<li>2</li>
</ul>

 

[Igor Schnaider]

А просто на CSS?

[wry]

8 минут назад, Igor Schnaider сказал:

А просто на CSS?

Меню идут не подряд. А через display: table-...; не получится.

[wry]

Удалось сделать способом от by chris

function getWindowWidth() {
  return window.innerWidth || document.body.clientWidth;
}

if (getWindowWidth() <= 768) {
  window.onload = function(){
    var b1 = document.getElementById("b1");
    var b2 = document.getElementById("b2");
    b1.parentNode.insertBefore(b2, b1);
}
}

Спасибо всем за участие.

Edited April 25, 2016 by wry