CSS - 拉div下面的另一个不工作在小屏幕上

我使用zurb-foundation作为css框架，我有一个标题的布局，我有一个标题栏和两个div。左边的分区在大屏幕上占用4列，右边的分区占8列。右边的那个图像占据整个div的宽度。在小屏幕上，我希望左侧div能够在右侧div下面移动，但问题是在小屏幕上div div会在右侧div下消失。这是HTML：CSS - 拉div下面的另一个不工作在小屏幕上

<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。我不确定css的哪个部分会让我无法工作，因为它只是在它自己的工作，而没有其他所有来自其他脚本的css，它们都是小提琴。

来源

2017-02-15 Leff

问题是你包列进：

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

如果你想避免不可预知的行为，这样的尝试坚持列的正常结构和筑巢：

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

当你插入的东西在行和列之间，或者根本不要在打破网格的行内包装列。

https://jsfiddle.net/wqupzmLw/

来源

2017-02-15 19:51:28

CSS - 拉div下面的另一个不工作在小屏幕上

回答

相关问题