CSS 基金会在小屏幕上向左 div 向右下方 div

Question

我有一个带有 header 的布局，其中有一个 title bar 和两个 div。左边的 Div 在大屏幕上占 4 columns，右边的 8 columns。右边的图片占据了整个 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

Answer 1

如果你想让文本在大屏幕上在左边，在小屏幕上在下面，你需要使用基金会提供的push and pull source ordering。

请注意，我不得不重新排序您的 html 并将包含文本的 div 放在图片下方。

https://jsfiddle.net/ru36n61v/

Answer 2

在基础网格中，您可以将 "pull" 和 "push" 类添加到网格列中，以便 "you can shift columns around between breakpoints"。它叫做 Source Ordering.

例如：

<div class="row">
  <div class="large-8 large-push-4">
      this goes to the right on large screens.
  </div>
  <div class="large-4 large-pull-8">
      this goes to the left.
  </div>
</div>

在较小的屏幕上，因为我们在右边添加了左边div的代码，所以自然会显示在下面。

我已经更新了您的 jsfiddle，以便左侧 div 位于右侧 div 下方。

CSS 基金会在小屏幕上向左 div 向右下方 div

CSS Foundation making left div go below right div on small screens

html

css

zurb-foundation