부트 스트랩의 중첩 된 열

Question

어떻게 부트 스트랩에서이 작업을 수행합니까? 나는 해결책을 알아 냈

<div class="aaa"> 
     <div class="col-md-8"> 
      <div class="col-md-12" style="background:yellow;height:100px;padding:20px;"> 

      </div> 
      <div class="col-md-6" style="background:red;height:200px;padding:20px;"> 

      </div> 
      <div class="col-md-6" style="background:blue;height:100px;padding:20px;"> 

      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="col-md-12" style="background:orange;height:200px;padding:20px;"> 

      </div> 
     </div> 
    </div> 

Answer 1

:

여기 내 솔루션입니다. Frederic Le Feurmou의 대답도 참조하십시오.
1. 두 번째 DIV에 @media (min-width: 992px) 중첩
2. 추가 float:right!important 제거되었습니다.

<div class="col-md-8" style="background:yellow;height:100px;"></div> 
<div class="col-md-4 float" style="background:red;height:200px;"></div> 
<div class="col-md-4" style="background:green;height:200px;"></div> 
<div class="col-md-4" style="background:blue;height:100px;"></div> 
<div class="col-md-8" style="background:purple;height:100px;"></div> 

CSS :

@media (min-width: 992px) 
    { 
    .float 
    { 
     float:right!important; 
    } 
    } 

링크 bootply합니다 : 난 내 코드를 추가 할 때 http://www.bootply.com/Pgt6WdBhtt

Answer 2

:

나는 마지막 COL-MD-8 다음 코드를 사용하여 제외하고 모든 것을 만들 수 있었다. 당신은 당신의 블록 중 하나를 부유시켜야합니다. 이 내 솔루션입니다

http://jsfiddle.net/8tvvrecw/2/

<div class="row" style="position:relative"> 
    <div class="col-xs-8" style="background:red; height:100px"></div> 
    <div class="col-xs-4" style="position:absolute; right:0; background:purple; height:200px"></div> 
</div> 


<div class="row"> 
    <div class="col-xs-4" style="background:black; height:200px"></div> 

    <div class="col-xs-8"> 
     <div class="row"> 
      <div class="col-xs-6" style="background:blue; height:100px"></div> 
     </div> 

     <div class="row"> 
      <div class="col-xs-12" style="background:green; height:100px"></div> 
     </div> 
    </div> 
</div>