Скрыть и показать в зависимости от размера экрана bootstrap 3 класса

для некоторых это может показаться очень легким, и из того, что я написал, мне кажется, что он сделает то, что я хочу, но, к сожалению, это не так. У меня есть два изображения, каждое изображение будет показано в зависимости от экрана размер, поэтому для первого в HTML я разместил скрытый-md, hidden-sm, hidden-xs, который дал бы мне впечатление. Он будет отображаться только на больших экранах, второй - только для того, чтобы быть видимым на планшетах /mobiles, поэтому я назначил видимый-sm, visible-md и hidden-lg, но когда я изменил размер браузера, первое изображение не будет отображаться, когда я скрою до размера планшета, однако он не появится при минимизации браузера до размера мобильного устройства, может ли кто-нибудь определить, что я сделал неправильно?

 <a class="navbar-brand hidden-md, hidden-sm, hidden-xs" style=" background-image: url('/Content/Images/FirstImage.png'); background-repeat: no-repeat;" href='@Url.Action("Index", "Home")'></a>

 <a class="navbar-brand hidden-lg, visible-sm, visible-md" style=" background-image: url('/Content/Images/SecondImage.png'); background-repeat: no-repeat;" href='@Url.Action("Index", "Home")'></a>

Ответы

Ответ 1

У вас есть запятые в вашем классе. Удалите их, и он будет работать так, как вы ожидаете.

<a class="navbar-brand hidden-md hidden-sm hidden-xs" style=" background-image: url('/Content/Images/FirstImage.png'); background-repeat: no-repeat;" href='@Url.Action("Index", "Home")'></a>

<a class="navbar-brand hidden-lg visible-sm visible-md" style=" background-image: url('/Content/Images/SecondImage.png'); background-repeat: no-repeat;" href='@Url.Action("Index", "Home")'></a>