Currently, I am utilizing the zurb-foundation as a CSS framework for my layout. Within this layout, there is a header consisting of a title bar and two divs. The left div occupies 4 columns on larger screens, while the right div takes up 8 columns. The right div contains an image that spans the entire width of the div. On smaller screens, my intention is for the left div to move below the right div. However, I am encountering an issue where the left div disappears under the right div on small screens. Below is the HTML code snippet:
<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">Menu</span>
</div>
<div class="title-bar-right">
<span class="title-bar-title">Support Association for Cancer Patients</span>
</div>
</div>
</div>
</div>
</div>
</div><!-- /.header -->
Below is the corresponding CSS code:
.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;
}
}
You can view the fiddle to see the issue in action. I am unsure which part of the CSS is causing this problem since it works fine in isolation, without the interference of other CSS from external scripts in the fiddle.