2014-01-09 5 views
4

붕괴 때 .COL-X 요소의 수직 정렬을 변경 I가 다음과 같은 레이아웃 때 대형 디스플레이 : 부트 스트랩 3 :

AAA BBB 
AAA CCC 

(모두 A의 모든 B 년대, 그리고 모든 C의 형태로 하나의 사업부, 정도 이 3 개 요소는이 붕괴 할 때

지금 내가 내가 HTML이 순서로 요소를 지정하려고

BBB 
AAA 
AAA 
CCC 

되고 싶어) 여기에 있습니다,하지만 최고의 내가 확장을 위해 얻을 관리 할 수 경쟁하다 w는

AAA BBB 
AAA 
    CCC 

I는 JS가 주위 물건을 이동 또는 정확한 위치에 CCC 중복을 갖는 도시 뷰포트의 크기에 따라 그 숨기는 생각할 수있는 유일한 솔루션 (.push-X 클래스를 사용) 하였다.

더 깨끗한 방법이 있습니까?

답변

0

나는이 질문이 몇 달 전에 다시 게시되었고 받아 들여진 대답이 당신이 무엇인지 알고있는 것으로 나타났습니다. https://stackoverflow.com/a/18517292/3172872

+0

불행히도. 이 문제는 A가 B보다 높고이 방법을 사용하면 C가 A의 맨 아래에 배치되므로 B와 C 사이에 간격이 있습니다 (http://bootply.com/104603) –

3
<div class="row"> 
    <div class="col-xs-12 col-md-6 col-md-push-6">BBB</div> 
    <div class="col-xs-12 col-md-6 col-md-pull-6">AAA</div> 
    <div class="col-xs-12 col-md-6 ">AAA</div> 
    <div class="col-xs-12 col-md-6 ">CCC</div> 
</div> 

작동합니다뿐만 아니라 예제 코드와 bootply 데모가있다.

는? ... 은 첫째로 당신은 당신이 바탕 화면에 확장 할 때, (그래서 다음 모바일

BBB 
AAA 
AAA 
CCC 

즉 '자연'순서를 고려 모바일 최우선 콘텐츠를 준비 할 필요가 수행되는 방법

당신 '이 얻을 것이다 :

BBB AAA <--- wrong order 
AAA CCC 

그래서, 당신은 다음 왼쪽

AAA 내용을 오른쪽으로 BBB 컨텐츠를 밀어하고 당겨 순서를 교체 할 필요가 0
BBB------>. 
.<------AAA 
+0

'AAA'는 두 부서 다. 그러나 그들은 그렇지 않다. 그들은'BBB'와'CCC'의 약 두배의 높이를 가진 하나의 div입니다. –