CSS-将div拉到另一个在小屏幕上不起作用的位置

Question

我正在使用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：

.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;
    }
}

这是小提琴 。 我不确定它会破坏css的哪一部分供我使用，因为它仅在单独运行时才起作用，而没有来自其他脚本的所有其他css，这只是摆弄。

Answer 1

问题是您将列包装到：

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

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

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

当您在行和列之间插入内容或根本不将列包装在行内时，就会破坏网格。

https://jsfiddle.net/wqupzmLw/