Question

我有一个带有标题的布局，其中有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

在基础网格中，您可以向网格列添加“拉”和“推”类，以便“您可以在断点之间移动列”。它被称为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

2 个答案: