두 열로 이동하는 부울 열

Question

부트 스트랩에 문제가 있습니다.

큰 브라우저에서 4 개의 25 % 열이있는 행에 4 개의 요소가있는 행이 있습니다. 브라우저가 Boostrap XS o SM 일 때 2 행 2 열로 구조를 사용하고 싶습니다. 구조를 뒤집어 쓰지 않고 가능합니까?

<div class="row col-md-12"> 
    <div class="col-md-3 col-xs-6 padding-h-sm line-height-sm"> 
     <div class="icon"><img src="images/mondiali-pallavolo/comunicare.png"></div> 
     <div>Comunicare news e aggiornamenti sul mondiale femminile.</div> 
    </div> 
    <div class="col-md-3 col-xs-6 padding-h-sm line-height-sm"> 
     <div class="icon"><img src="images/mondiali-pallavolo/responsive.png"></div> 
     <div>Rendere fruibili i contenuti in qualsiasi momento.</div> 
    </div> 
    <div class="col-md-3 col-xs-6 padding-h-sm line-height-sm"> 
     <div class="icon"><img src="images/mondiali-pallavolo/gestione.png"></div> 
     <div>Semplificare la creazione e la gestione dei contenuti.</div> 
    </div> 
    <div class="col-md-3 col-xs-6 padding-h-sm line-height-sm"> 
     <div class="icon"><img src="images/mondiali-pallavolo/sponsor.png"></div> 
     <div>Aumentare la visibilità degli sponsor così da sostenere l'investimento.</div> 
    </div> 
</div> 

감사합니다) 당신이 그것을 말하고 있기 때문에

Answer 1

, 그것은이 원인이되는 텍스트의 가변 길이지만, 가변 높이 이미지가 동일 할 것 . 가장 좋은 수정은 2 열 후 넣어 ... hidden-* clearfix 콤보 트릭이며, 그것은 것입니다 만 비 lg 장치에 clearfix하지만, lg에 그대로과 같이 떠나 :

<div class="hidden-lg clearfix"></div> 

예 : http://www.bootply.com/emnE5Yaoil

Answer 2

그것은 행 당 두 개의 컬럼에 무슨 일이 COL-XS-6. 당신은 항상 행 레이아웃 당 네 개의 열하길 원한다면, 당신은이 작업을 수행 할 수 :

이 경우

<div class="row"> 
    <div class="col-xs-3 padding-h-sm line-height-sm"> 
     <div class="icon"><img src="images/mondiali-pallavolo/comunicare.png"></div> 
     <div>Comunicare news e aggiornamenti sul mondiale femminile.</div> 
    </div> 
    <div class="col-xs-3 padding-h-sm line-height-sm"> 
     <div class="icon"><img src="images/mondiali-pallavolo/responsive.png"></div> 
     <div>Rendere fruibili i contenuti in qualsiasi momento.</div> 
    </div> 
    <div class="col-xs-3 padding-h-sm line-height-sm"> 
     <div class="icon"><img src="images/mondiali-pallavolo/gestione.png"></div> 
     <div>Semplificare la creazione e la gestione dei contenuti.</div> 
    </div> 
    <div class="col-xs-3 padding-h-sm line-height-sm"> 
     <div class="icon"><img src="images/mondiali-pallavolo/sponsor.png"></div> 
     <div>Aumentare la visibilità degli sponsor così da sostenere l'investimento.</div> 
    </div> 
</div>