Foundation - Reorganize blocks according to Foundation breakpoints - html

Question

Here a coarse scaling of what I'm trying to do :
As you can see, I want to make several "organizations" of my three blocks :
On Large screens (and larger), I want them to be next to each other
On Medium screens, I want the first and the third block on the same row, and the second bloc on another row
On Small screens, I want them each to be one below the other
So, the problem appears on medium screens, the third block needs to be before the second block.
To solve it, I put the third block twice :
One between the first block and the second block (with the class rule "show-for-medium-only")
The other one after the second block (with the class rule "hide-for-medium-only")
Which gives me this html (you can see it in action here) :
<div class="row">
<div class="small-12 medium-4 large-3 columns">
<div class="panel">
1
</div>
</div>
<div class="show-for-medium-only medium-8 columns">
<div class="panel">
3
</div>
</div>
<div class="small-12 medium-12 large-5 columns">
<div class="panel">
2
</div>
</div>
<div class="hide-for-medium-only small-12 large-4 columns">
<div class="panel">
3
</div>
</div>
</div>
So my question is : Is there any ways to do it without duplicating the third block ? (Without using JavaScript, preferably with native Foundation rules)

Answer 1

You can use source-ordering or removing elements from the document flow and ordering them in layers with css and some html boilerplate:
http://jsfiddle.net/uw8U8/
html:
<div class="wrapper">
<div class="row layer-1">
<div class="small-12 medium-4 large-3 columns">
<div class="panel first">
1
</div>
</div>
<div class="small-12 medium-8 large-4 large-offset-5 third-column columns">
<div class="panel dummy"></div>
<div class="panel dummy"></div>
<div class="panel third">
3
</div>
</div>
</div>
<div class="row layer-2">
<div class=" medium-12 large-5 large-offset-3 columns">
<div class="panel second">
2
</div>
</div>
</div>
</div>
and app.scss
#import "settings";
#import "foundation";
.wrapper{
position: relative;
margin: auto;
max-width: $row-width;
}
.panel{
text-align: center;
height: 1.5em;
font-size: 1000%;
color: white;
}
.first{
background-color:#e64433;
}
.second{
background-color:#09afb9;
}
.third{
background-color:#ed9a24;
}
#media #{$large-up} {
.layer-1, .layer-2{
position: absolute;
}
}
.dummy{
display: none;
}
#media #{$small-only} {
.third-column{
position: absolute;
}
.dummy{
display: block;
visibility: hidden;
}
}
or css output for the default Foundation 5 setting:
.wrapper {
position: relative;
margin: auto;
max-width: 62.5rem;
}
/* line 11, ../scss/app.scss */
.panel {
text-align: center;
height: 1.5em;
font-size: 1000%;
color: white;
}
/* line 18, ../scss/app.scss */
.first {
background-color: #e64433;
}
/* line 21, ../scss/app.scss */
.second {
background-color: #09afb9;
}
/* line 24, ../scss/app.scss */
.third {
background-color: #ed9a24;
}
#media only screen and (min-width: 64.063em) {
/* line 30, ../scss/app.scss */
.layer-1, .layer-2 {
position: absolute;
}
}
/* line 35, ../scss/app.scss */
.dummy {
display: none;
}
#media only screen and (max-width: 40em) {
/* line 39, ../scss/app.scss */
.third-column {
position: absolute;
}
/* line 42, ../scss/app.scss */
.dummy {
display: block;
visibility: hidden;
}
}

Answer 2

Not really a Foundation oriented answer, but with display: grid; being widely supported, this solution should work with any CSS framework and will make the HTML much cleaner and the CSS much more flexible 😀 (by doing this, you also keep the styling out of the HTML document, which is a good practice and better for maintainability 😉)
The idea is to re-create a grid of 12 columns using :
display: grid;
grid-template-columns: repeat(12, 1fr);
And then span our panels on the corresponding number of columns using :
grid-column: span {{ number of column }};
Which gives us this :
html, body {
margin: 0;
padding: 0;
}
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr); /* 1fr = 1 column */
grid-gap: 20px; /* gutter beetween each column and row */
margin: 20px;
}
.panel {
height: 180px;
line-height: 180px;
text-align: center;
font-size: 50px;
font-family: Impact, sans-serif;
color: #fff;
}
/* large screen */
.panel:nth-child(1) {
grid-column: span 3; /* 3 columns */
background-color: #e64433;
}
.panel:nth-child(2) {
grid-column: span 5; /* 5 columns */
background-color: #09afb9;
}
.panel:nth-child(3) {
grid-column: span 4; /* 4 columns */
background-color: #ed9a24;
}
/* medium screen */
#media (max-width: 1000px) {
.panel:nth-child(1) {
order: 1;
grid-column: span 4;
}
.panel:nth-child(2) {
order: 3;
grid-column: span 12;
}
.panel:nth-child(3) {
order: 2;
grid-column: span 8;
}
}
/* small screen */
#media (max-width: 600px) {
.panel:nth-child(1) {
order: 1;
grid-column: span 12;
}
.panel:nth-child(2) {
order: 2;
grid-column: span 12;
}
.panel:nth-child(3) {
order: 3;
grid-column: span 12;
}
}
<div class="grid">
<div class="panel">
1
</div>
<div class="panel">
2
</div>
<div class="panel">
3
</div>
</div>
You may also consider grid-template and grid-area which is a bit harder to understand at first sight, but may allow you to be more creative depending on your needs
Here is the result :
html, body {
margin: 0;
padding: 0;
}
.grid {
display: grid;
grid-template: "pannel1 pannel2 pannel3" auto / 3fr 5fr 4fr;
grid-gap: 20px;
margin: 20px;
}
.panel {
height: 180px;
line-height: 180px;
text-align: center;
font-size: 50px;
font-family: Impact, sans-serif;
color: #fff;
}
/* large screen */
.panel:nth-child(1) {
grid-area: pannel1;
background-color: #e64433;
}
.panel:nth-child(2) {
grid-area: pannel2;
background-color: #09afb9;
}
.panel:nth-child(3) {
grid-area: pannel3;
background-color: #ed9a24;
}
/* medium screen */
#media (max-width: 1000px) {
.grid {
grid-template:
"pannel1 pannel3" auto
"pannel2 pannel2" auto / 1fr 2fr;
}
}
/* small screen */
#media (max-width: 600px) {
.grid {
grid-template:
"pannel1" auto
"pannel2" auto
"pannel3" auto / 1fr;
}
}
<div class="grid">
<div class="panel">
1
</div>
<div class="panel">
2
</div>
<div class="panel">
3
</div>
</div>
Beware that the above solutions preserve the original document flow, which means, that if you want to "Tab" through the focusable elements of the page, it will always go to the second panel before the third, even though you'd expect to go to the third panel before the second on medium screens.
If it is a problem for you, you'll need either JS to automatically update tabindex properties on your pannels, or to re-order element in the HTML DOM itself, and if using JS is not a solution for you, then the code example in the original post is the only way to go I guess.
But remember that rearranging items in the DOM depending on the screen's size may not always be a good idea for accessibility :
Rearranging grid items visually does not affect the default traversal order of sequential navigation modes (such as cycling through links).
[CSS Grid Layout and Accessibility]