2 열로 축소되는 3 열 레이아웃 만들기

Question

1440px 이상에서는 3 열, 800px에서 1440px로 2 열로 레이아웃을 만들려고합니다. 그러나 미디어 쿼리가 제대로 작동하지만 그것이 있다면 붕괴를 정렬 왼쪽 때 제 안부를 볼 수 있듯이

Screen shot http://pichut.eu/x/Screen_Shot_2013-10-13_at_10.png

은, 그러나 그것은 첫 번째 열의 끝 노호 앉아있다, 그러나 나는 선호 : 문제는 COLS 수직으로 정렬하려고 노력한다 첫 번째의 하단에 정렬! (이해 : L)

가 여기에 COLS에 대한 HTML이다 :

<div class="dyn-col"> 
    <div class="widget"> 
     <div class="widget-title"> 
      Widget Title 
     </div> 
     <div class="widget-content"> 
      Widget Contents 
     </div> 
    </div> 
</div> 

<div class="dyn-col"> 
    <div class="widget"> 
     <div class="widget-title"> 
      Widget Title 
     </div> 
     <div class="widget-content"> 
      Widget Contents 
     </div> 
    </div> 
</div> 

<div class="dyn-col"> 
    <div class="widget"> 
     <div class="widget-title"> 
      Widget Title 
     </div> 
     <div class="widget-content"> 
      Widget Contents 
     </div> 
    </div> 
</div> 

그리고 여기에 내가 페이지에 대해 가지고 한 CSS의 ...

/*================================================= 
Dynamic Cols 
=================================================*/ 
.dyn-col { 
    width: 100%; 
    display: block; 
    float: left; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box 
    -moz-box-sizing: border-box 
} 

@media screen and (max-width: 800px) { 
    .dyn-col { 
     width: 100% !important; 
    } 
} 

@media screen and (min-width: 801px) and (max-width: 1439px) { 
    .dyn-col { 
     width: 50% !important; 
     float: left; 
    } 

    .dyn-col:last-child { 
    } 
} 

@media screen and (min-width: 1440px) { 
    .dyn-col { 
     width: 33.3% !important; 
    } 
} 

Answer 1

부트 스트랩을 사용하는 것이 좋습니다겠습니까 3은 내가 많이 사용하는 것과 같은 일을 할 때 삶을 편하게 만듭니다.