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

回答

相關問題