以下のようなCSSで、メインビジュアルの背景画像を出し分けたい場合、スマホでアクセスすると、まず「large.jpg」が読み込まれてから、「small.jpg」が読み込まれるのでしょうか？

• 
  モバイルファーストで書かないとダメでしょうか？

#mainVisual {
background-image: url("images/large.jpg");
}

@media (max-width: 1279px) {
#mainVisual {
background-image: url("images/medium.jpg");
}
}

@media (max-width: 639px) {
#mainVisual {
background-image: url("images/small.jpg");
}
}