CSS - вытягивание div ниже другого, не работающего на небольших экранах

Question

Я использую zurb-foundation как css framework, и у меня есть макет с заголовком, где у меня есть строка заголовка и два div. Div налево занимает 4 столбца на больших экранах, а справа - 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/