CSS - 작은 화면에서 작동하지 않는 다른 하나의 아래 div 가져 오기

Question

나는 CSS 프레임 워크로 zurb-foundation을 사용하고 있으며 제목 표시 줄과 두 개의 div가있는 머리글이있는 레이아웃이 있습니다. 왼쪽의 Div는 큰 화면에서 4 개의 열을 차지하고 오른쪽의 div는 8 개의 열을 차지합니다. 오른쪽에있는 이미지에는 전체 div의 너비를 차지하는 이미지가 있습니다. 작은 화면에서 왼쪽 div가 오른쪽 div 아래로 가고 싶습니다만, 문제는 작은 화면에서 왼쪽 div가 오른쪽 div 아래에 사라진다는 것입니다. 이것은 HTML입니다 :

<div class="header row row-wrapper"> 
    <div class="frontpage-header-content"> 
     <?php while (have_posts()) : the_post(); ?> 
     <div class="large-4 medium-12 columns lcol"> 
     <h3><?php the_title(); ?></h3> 
     <div class="border"></div> 
     </div> 
     <div class="large-8 medium-12 columns rcol"> 
     <div class="hero-image-wrapper"> 
      <?php the_post_thumbnail(); ?> 
      <div class="overlay"></div> 
     </div> 
     </div> 
    </div> 

    <div class="header-title-bar"> 
     <div class="row"> 
     <div class="large-12 columns"> 
      <div class="title-bar"> 
      <div class="title-bar-left"> 
       <button class="menu-icon" type="button" data-open="offCanvasLeft"></button> 
       <span class="title-bar-title">Meny</span> 
      </div> 
      <div class="title-bar-right"> 
       <span class="title-bar-title">Støtteforeningen for Kreftrammede</span> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div><!-- /.header --> 

그리고 이것은 CSS입니다 :

.header-title-bar { 
    position: absolute; 
    top: 0; 
    width: 100%; 
} 
.header .columns { 
    padding-right: 0; 
} 

.hero-image-wrapper .overlay { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 16px; 
    background: rgba(255, 255, 255, .3); 
} 

@include breakpoint(medium down) { 
    .row-wrapper{ 
     width :100%; 
     display: flex; 
     flex-flow: row wrap; 
    } 
    .lcol{ 
     float:left; 
     order: 2; 
    } 
    .rcol{ 
     float:right; 
     order: 1; 
    } 
} 

이것은 fiddle입니다. 나는 그것이 작동하고 있기 때문에 그것이 작동하고 있기 때문에 그것이 작동하고있는 CSS의 어느 부분을 망치고 있는지 확실하지 않다. 다른 스크립트에서 오는 다른 모든 CSS가 없다면, 그것은 바이올린에있다.

Answer 1

문제는 당신에 열을 포장한다 :

<div class="frontpage-header-content"> 

이 컬럼의 적절한 구조와 중첩에 충실하려고처럼 예측할 수없는 동작을 방지하려면 :

<div class="row"> 
    <div class="large-12 columns"> 
    </div> 
</div> 

당신은 일을 삽입 할 때 행과 열 사이에 배치하거나 행을 격자 밖으로 나눕니다.

https://jsfiddle.net/wqupzmLw/