CSS - pulling div below the other one not working on small screens

Question

I am using zurb-foundation as css framework and I have a layout with a header where I have a title bar, and two divs. Div on left takes up 4 columns on big screens and the one on right takes 8 columns. The one on right has an image that takes up the whole div's width. On small screens I would like the left div to go below right div, but the problems is that on the small screens left div disappears under the right div. This is the 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 -->

And this is the 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;
    }
}

This is the fiddle . I am not sure which part of the css it is ruining it for me to work, since it works when it is just on it's own, without all the other css that comes from other scripts, that is in the fiddle.

Answer 1

The problem is you wrapping columns into:

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

If you want to avoid unpredictable behavior like this try to stick to proper structure and nesting of columns:

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

When you insert things between row and columns or simply never wrap columns inside of rows you're breaking the grid.

https://jsfiddle.net/wqupzmLw/