Html CSS-将div拉到另一个div的下方，在小屏幕上不工作

我使用zurb foundation作为css框架，我有一个带有标题栏和两个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破坏了我的工作，因为它是独立工作的，没有来自其他脚本的所有其他css，这是在小提琴中。

问题是您将列包装到：

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

如果要避免此类不可预知的行为，请尝试坚持正确的结构和列嵌套：

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

当您在行和列之间插入内容，或者根本不在行中包装列时，您正在破坏网格

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