События (js) и media запросы (css)

[TommyWork]

Подскажите, пожалуйста как на практике должно работать, не могу разобраться.

Есть элемент HTML

<div class="my_div"></div>

В нем находятся другие DOM узлы, которые при разрешения окна браузера не менее 1000px располагаются в строку, а при разрешении менее 1000px в столбик.

Данное действие описано CSS, через медиа

@media (min-width: 1000px) {
.my_div > div {
 display: inline;
}
}

@media (max-width: 999px) {
.my_div > div {
 display: block;
}
}

Помимо этого, есть функция JavaScript, которая измеряет размер блока с классом my_div, как только происходит изменения размера окна браузера. Пусть функция называется myDivSize();

То есть:

window.addEventListener('resize', myDivSize, false);

Вопрос, если произойдет переход размера окна браузера по ширине с 1000px на 999px или же высота my_div будет меняться от каждого изменения ширины окна браузера (предположим что my_div резиновый), что сработает ранее, media CSS или JS event? Потому что у меня есть предположение, что в event поступает старая информация о высоте блока.

P.S. CSS файл подключен в head, а JS скрипт в самый конец документа перед закрывающим тегом </body> через src=""

[j0hnik]

.my_div > div {
 display: inline;
}

@media (max-width: 999px) {
.my_div > div {
 display: block;
}
}

Обычно делают так.
Что за необходимость менять размер блока средствами JS?
95% случаев достаточно CSS