как повернуть img в видимой-xs и видимой-sm bootstrap

Question

Я сделал класс row2 для img, который я хочу повернуть. Есть три элемента img, которые я хочу повернуть, когда видимость xs и sm.

Теперь мой вопрос, как я могу повернуть img, когда видимость Макс visible-xs и visible-sm без вращения visible-md и visible-lg?

 <div class="row2"> 
      <div class="visible-lg col-lg-3" id="particulier"> 

      </div> 
      <div class="col-xs-12 col-md-4 col-lg-2" id="particulier"> 
      <a href="http://www.egcomputerspecialisten.nl/page/176"><img alt="" src="particulier.jpg" class="img-responsive center-block" /></a> 
     </div> 
      <div class="col-xs-12 col-md-4 col-lg-2" id="webshop"> 
      <a href="http://shop.egcomputerspecialisten.nl/?pk_campaign=egcs.nl&pk_kwd=menu_link "><img alt="" src="webshop.jpg" class="img-responsive center-block" /></a> 
      </div> 
      <div class="col-xs-12 col-md-4 col-lg-2" id="zakelijk"> 
      <a href="http://www.egcomputerspecialisten.nl/news/8"><img alt="" src="zakelijk.png" class="img-responsive center-block" /></a> 
      </div> 
      <div class="visible-lg col-lg-3" id="particulier"> 

      </div> 
     </div> 

Стиля:

.row2 { 
     -ms-transform: rotate(-0.5deg); /* IE 9 */ 
     -webkit-transform: rotate(-0.5deg); /* Chrome, Safari, Opera */ 
     transform: rotate(-0.5deg); 
    } 

Надеется, что вы, ребята, можете мне помочь.

Answer 1

Чтобы исправить @Panto, самозагрузки имеет следующие точки останова default

/* xs */ 
@media (max-width: 767px) {} 
/* sm */ 
@media (min-width: 768px) and (max-width: 991px) {} 
/* md */ 
@media (min-width: 992px) and (max-width: 1199px) {} 
/* lg */ 
@media (min-width: 1200px) {} 

так @Twan в вашем случае вы должны писать классы внутри

@media (max-width: 991px) {} /* this covers xs and sm */ 

еще одно замечание о вашем коде. Нет необходимости использовать visible-lg с классами col-lg-X.

Answer 2

Использование медиа запросов

для Xs экранов

@media only screen and (max-width : 480px) { 
    img { 
    //style 
    } 
} 

для экранов см

@media only screen and (max-width : 768px) { 
    img { 
    //style 
    } 
}