화면의 크기를 조정할 때 인라인 대 스태킹을 제어하는 ​​방법은 무엇입니까?

Question

페이지의 크기를 더 작은 너비로 조정할 때 특정 지점 이후에만 세 개의 col-# div가 서로 겹치기를 원합니다. 지금은 col-3 div가 페이지 크기를 조정하자마자 바로 아래로갑니다. col-2는 너비가 301px가 될 때까지 <h3> 및 <p> 텍스트를 다시 조정 한 다음 아래에도 스택합니다. 이 '스태킹 포인트'를 결정하는 요소는 무엇입니까? 나는 재산을 찾을 수 없다. PrtSc 키 : columns stacking

<!-- HTML starts here. This inside a colophon a footer --> 

<div class="engage-row"> 
    <div class="col-1"> 
     <img src=""> 
    </div> 
    <div class="col-2"> 
     <h3> 
     </h3> 
     <p> 
     </p> 
     Signup Form 
    </div> 
    <div class="col-3"> 
     <img src=""> 
    </div> 
</div> 

<div class="footer-wfix 
</div> 
<!-- HTML ends here --> 

/* In CSS, in the child-theme I have this */ 

.engage-row:after { 
    content: ""; 
    display: inline-table; 
    clear: both; 
} 
.col-1{ 
    float: left; 
    width: 301px; 
} 
.col-2{ 
    float: left; 
    width: 50%; 
    padding: 10px 20px 0px 20px; 
.col-3{ 
    float: left; 
    width: 301px; 
} 
.footer-wfix { 
    clear: both; 
} 

감사 (I 화면의 크기를 조정 때 중첩 비율 (25 %, 50 %, 25 %)와 내용으로 3 열 '폭을 가지기 전에).

Answer 1

스택 픽셀과 스택 예제가있는 Bootply가 있습니다. 이는 스크린 크기 열 수정 자 (아래에 자세히 설명 됨)에 의해 지정됩니다.

http://www.bootply.com/ygqBb2GxrV#

귀하는 자신의 "행"-classed 사업부에 쌓을 수있어 모든 포장 wan't. 이어서 열 클래스의 화면 크기 조정제를 사용하여 (즉 COL-MD-5)

XS - 매우 작은 화면 SM - 작은 화면 MD - 미디어 장치 LG - 대화면