반응형 크기에 따로 로고를 바꾸고 싶은데..

반응형 크기에 따라서 로고를 좀 바꾸고 싶은데

혹시 이것을 css 수정만으로도 가능할까요?

해당 로고가 보여지는 페이지 소스가

        <div id="logo-bar">

            <div class="container">

                <div class="row">

                    <!-- Logo / Mobile Menu -->

                    <div  class="col-lg-3 col-sm-3 ">

                        <div id="logo">

                            <h1><a href="main.php"><img alt="logo" src="main/logo.png"/></a></h1>

                        </div>

                    </div>

                </div> 

            </div> 

        </div> 

해당 css에서 접속기기가 480 이하일때는 

main/logo.png 대신에 main/logo1.png이 보여줄려면 아래 소스를 어찌 수정해야 할까요?

@media only screen and (max-width: 480px){ 

    #logo-bar{ } 

    #logo{ } 

}