부트 스트랩 열 재 배열 및 2 열 스패닝. 내 레이아웃이 가능합니까?

Question

부트 스트랩을 사용 중이며 데스크톱 및 모바일에서 다음 레이아웃을 만들려고합니다. 본질적으로 맨 오른쪽 열은 동적 길이의 세로 막대와 유사한 페이지에서 3 개의 열이 있습니다. 상자 A와 B는 중요한 정보를위한 것이고 상자 D는 페이지의 "주요 내용", 즉 그 밖의 모든 것에 대한 것입니다.

데스크탑보기

| ...... ....... | | .... B .... | | .... C .... |

| .............. D .............. | | .... C .... |

| .............. D .............. | | .... C .... |

| .............. D .............. | | .... C .... |

| .............. D .............. |

모바일보기

| ........ A ....... |

| ........ B ....... |

| ........ C ....... |

| ........ D ....... |

모바일보기에서 나는 상자에 순서대로 표시 할, A, B, C 및 D

나는 D가 폭 모두에 걸쳐, 바로 A와 B 아래 시작하려는 dekstop보기에서

. 표준 부트 스트랩을 사용하면 A, B 및 C를 D와 동일한 행에 넣을 수 없습니다. C가 끝날 때까지 시작하지 않습니다. 또한 A, B 및 D를 열에 중첩 할 수 없습니다. A, B, D, C.

부트 스트랩 열 다시 정렬을 살펴본 적이 있지만 내 상황에서 어떻게 작동하는지 알 수 없습니다. 어쩌면 나는 명백한 것을 놓치고 있을지 모른다. 어떤 도움을 주셔서 감사합니다!

Answer 1

가장 중요한 부분은 @media query 및 float : right입니다. "Run code snippet"상자에서 미디어 쿼리가 작동하지 않지만 제대로 작동하지 않습니다.

.block-a { 
 
\t background: red; 
 
\t height: 50px; 
 
} 
 

 
.block-b { 
 
\t background: green; 
 
\t height: 50px; 
 
} 
 

 
.block-c { 
 
\t background: yellow; 
 
\t height: 150px; 
 
} 
 

 
@media (min-width: 768px) { 
 
\t .block-c { 
 
\t \t float: right; 
 
\t } 
 
} 
 

 
.block-d { 
 
\t background: pink; 
 
    height: 200px; 
 
} 
 
\t

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
\t <div class="row"> 
 
\t \t <div class="col-sm-6 block-a">A</div> 
 
\t \t <div class="col-sm-3 block-b">B</div> 
 
\t \t <div class="col-sm-3 block-c">C</div> 
 
\t \t <div class="col-sm-9 block-d">D</div> 
 
\t </div> 
 
</div>