CSS基础制作左div在小屏幕上右下div

我有一个标题的布局，我有一个title bar和两个div。在左边的分区在大屏幕上占用4 columns，右边的分区占用8 columns。右边的那个图像占据整个div的宽度。在小屏幕上，我希望左侧div能够在右侧div下面移动，但问题是在小屏幕上div div会在右侧div下消失。这是HTML：CSS基础制作左div在小屏幕上右下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

来源

2017-02-15 Leff

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

请注意，我必须重新排列您的html并将div包含文字放在图像下方。

https://jsfiddle.net/ru36n61v/

来源

2017-02-15 14:56:50

我没有在我的页面上看到想要的结果，图像越来越小，并且正确的div未占用全宽，但我会接受您的答案并为其发布另一个问题 – Leff

我设法解决了我在我的网页上，这是小提琴：https://jsfiddle.net/ru36n61v/8/我会提出一个新的问题 – Leff

这是新的问题是：http://stackoverflow.com/questions/ 42258491/CSS-拉DIV-低于最其它一 - 不工作，在小屏幕 – Leff

在基础网格，您可以添加“拉”和“推”类网格列，这样“就可以断点之间游移列”。它的名字叫做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。

来源

2017-02-15 15:00:26 raffi

CSS基础制作左div在小屏幕上右下div

回答

相关问题