CSS Foundation, создающий левый div, находится ниже правого div на маленьких экранах

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

В сетке фундамента вы можете добавить «тянуть» и «PUSH» классы в столбцах сетки так, что «вы можете переместить столбцы вокруг между контрольными точками». Его называют 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.