부트 스트랩 3으로 다른 레이아웃을 어떻게 표시합니까?

Question

내 모바일보기에 다른 레이아웃을 표시하려고합니다. 그리드 시스템을 사용하는 바탕 화면보기에서 나는 각 열이 2 열이고 이미지와 레이블 + 값이 각각 4 열입니다. 모바일에서는 이미지 열을 건너 뛰고 레이블과 값에 대해 서로 옆에 다음과 같이 표시하려고합니다.

레이블 : 이것은 범위입니다. 데스크톱 버전의

1 열은 다음과 같이 보입니다 :

<div class="col-md-3"> 
     <div class="col-md-2"> 
     <p>col-md-4</p> 
     </div> 
     <div class="col-md-10"> 
     <div>This is a label</div> 
     <span>This is a span</span> 
     </div> 
</div> 

내가 COL-SM-3를 사용하려고 노력을하지만 여전히 바탕 화면에 표시? 레이블과 값이 서로 나란히있는 모바일보기를 얻으려면 어떻게해야합니까?

은 참조 : codepen

Answer 1

당신은 부트 스트랩 CSS 클래스를 사용할 수 있습니다

<h2>Example</h2> 
<p>Resize this page to see how the text below changes:</p> 
<h1 class="visible-xs">This text is shown only on an EXTRA SMALL screen.</h1> 
<h1 class="visible-sm">This text is shown only on a SMALL screen.</h1> 
<h1 class="visible-md">This text is shown only on a MEDIUM screen.</h1> 
<h1 class="visible-lg">This text is shown only on a LARGE screen.</h1> 

Answer 2

당신은 화면 크기에 따라 요소/클래스/ID의 속성을 변경할 수있는 미디어 쿼리를 사용. 다음과 같이 display: none; 사용에 특히 관심이있을 수 있습니다 : 사용

CSS는 col-xs-3의 기능 (또는 당신의 선택의 어떤을)를 두 배로 물론

/*For smartphone and small devices*/ 
@media only screen and (min-width: 480px) { 
    .hide-me { 
     display: none; 
    } 
} 

/*For tablet sized devices and larger*/ 
@media only screen and (min-width: 748px) { 
    .hide-me { 
     display: block; 
    } 
} 

하지만 당신의 클래스 선택기로 미디어 쿼리

@media only screen and (min-width: 748px) { 
    .col-xs-3 { 
     display: block; 
    } 
} 

몇 가지 표준 문서 반응 형 디자인 - 특히 Twitter에서 제공하는 디자인을 확인하십시오! 먼저 모바일이 일반적이며 작은 미디어 쿼리부터 시작하여 커집니다.

http://getbootstrap.com/css/