div가 맨 위로 이동하지 않습니다.

Question

6 개의 패널, 3 col-md-4 및 3 col-md-8이있는 bootstrap3을 사용하여 페이지를 만들었습니다. 3 col-md-4는 왼쪽으로 떠 있어야하며 3 col-md-8은 오른쪽으로 유동해야합니다 ( ).하지만 각각 하나의 조건이 존재합니다 (페이지에 항상 6 개의 패널이있는 것은 아닙니다).

모두 6 레이아웃 apearing 싶으 같다 :

[col-md-4(2)][ col-md-8(1) ] 
[col-md-4(3)][ col-md-8(2) ] 
      [ col-md-8(3) ] 

:

[col-md-4(1)][ col-md-8(1) ] 
[col-md-4(2)][ col-md-8(2) ] 
[col-md-4(3)][ col-md-8(3) ] 

그리고 (1) 예를 들어, 누락-4 COL-MD 레이아웃이 보이는 경우

그러나 모든 패널은 최대에서 최대 1 "수준"을 간다 그렇다면 COL-MD-4 (1), (2) 레이아웃과 같이 표시됩니다 예를 들어 누락 :

   [ col-md-8(1) ] 
[col-md-4(3)][ col-md-8(2) ] 
      [ col-md-8(3) ] 

그래서이 패널을 쌓아서 제대로 작동 시키는데 올바른 방법은 무엇입니까?

나는이 "수정"준 또 다른 게시물에 대답했다 :

HTML

<div id="container"> 
    <div id="left"> 
     <div id="first"></div> 
     <div id="second"></div> 
    </div> 
    <div id="right"> 
     <div id="third"></div> 
     <div id="fourth"></div> 
    </div> 
</div> 

CSS

#left { 
    float: left; 
} 
#right { 
    float: right; 
} 

을하지만 난 사용하려고 할 때 그 결과는 것을 :

[col-md-4(1)] 
[col-md-4(2)] 
[col-md-4(3)] 
[ col-md-8(1) ] 
[ col-md-8(2) ] 
[ col-md-8(3) ] 

col-md-8 것들이 오른쪽으로 떠오르지 않았다.

Answer 1

아니, 이렇게하면 안된다. 가치가있는 모든 칼 4 개가 왼쪽에 있고 값 8이있는 모든 칼럼이 오른쪽에 오길 원 하나?
당신은 내가 방금 만든이 링크를 확인할 수 있습니다

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
<div class="row"> 
    <div class="col-md-4"> 
    This is col-md 4 
    </div> 
    <div class="col-md-8"> 
    This is col-md-8 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-4"> 
    This is col-md 4 
    </div> 
    <div class="col-md-8"> 
    This is col-md-8 
    </div> 
</div><div class="row"> 
    <div class="col-md-4"> 
    This is col-md 4 
    </div> 
    <div class="col-md-8"> 
    This is col-md-8 
    </div> 
</div><div class="row"> 
    <div class="col-md-4"> 
    This is col-md 4 
    </div> 
    <div class="col-md-8"> 
    This is col-md-8 
    </div> 
</div> 

CSS 여기

.col-md-4 
{ 

    background-color: lightblue; 
} 
.col-md-8 
{ 
    background-color: pink; 
} 

링크
http://codepen.io/Rehman/pen/WxaGbE