CSS - 小さな画面で動作しないdivを下に引き出します

Question

私はCSSフレームワークとしてzurb-foundationを使用しています。ヘッダーにはタイトルバーと2つの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、すなわちフィドルにはありません。

Answer 1

問題はあなたに列をラップしている：あなたは、列の適切な構造とネスティングに固執しようと、このような予期しない動作を回避したい場合

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

：

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

あなたは物事を挿入すると行と列の間にあるか、または単にグリッドを破る行の中に列をラップすることはありません。

https://jsfiddle.net/wqupzmLw/