Lukindo Mbuli Lukindo Mbuli - 4 months ago 11
CSS Question

Add a row to a nested flex container on media query

I have one primary container that holds all the

div
s using a
flex-direction
of row.

A second container that is nested holds two
div
s that have a
flex-direction
of column, to stack up two
div
s in one row in the outer container.

Using
flex-box
and media query, I was attempting to change the existing two row column
div
'smaller-container' into a three row column div once the browser width is less than 1000px.

I tried doing this by creating a third empty
div
within
smaller-container
and swapping its order with a div outside the smaller-container once the browser width is less than 1000px.

It didn't work. I think this is because the two
div
s in question (the empty div and the outer div) are at a different nesting level.

It would be great if someone can find a solution to turn the two row in one column to three row in one column.

Even better if that solution has no need of a nested container. Javascript solution is also welcome if it doesn't require a plugin.

Image of how it should look:

enter image description here



/*Basic Reset*/

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
max-width: 1366px;
margin: auto;
width: 100%;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.box-1 {
order: 1;
background-color: red;
height: 150px;
width: 50%;
}
.smaller-container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
width: 50%;
order: 2;
}
.box-2 {
order: 3;
background-color: blue;
height: 75px;
width: 100%;
}
.box-3 {
order: 4;
background-color: green;
height: 75px;
width: 100%;
}
.box-4 {
order: 5;
width: 100%;
}
.box-5 {
order: 6;
background-color: orange;
height: 150px;
width: 100%;
}
@media screen and (max-width: 1000px) {
.box-2 {
height: 50px;
}
.box-3 {
height: 50px;
}
/******* Here we swap the empty div that hasbeen existing in the smaller container
with an outer div ********/
.box-5 {
order: 5;
height: 50px;
}
.box-4 {
order: 6;
background-color: purple;
height: 150px;
}
}
[image of desired solution][1] [1]:http://i.stack.imgur.com/vlvlx.png

<div class="container">
<div class="box-1"></div>
<div class="smaller-container">
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4"></div>
</div>
<div class="box-5"></div>
</div>





https://jsfiddle.net/lukindo/nuv603h9/1/

Answer

Well, you're right that the order property doesn't work at different nesting levels. It only works among siblings.

Scripting is one option you can pursue. Another, a bit hackish, is to duplicate an HTML element. Specifically, place the orange box element (.box-5) in both the primary and nested container.

The use display: none on both orange and purple boxes per your media query.

Here's an example:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  max-width: 1366px;
  margin: auto;
  width: 100%;
}
.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.box-1 {
  order: 1;
  background-color: red;
  height: 150px;
  width: 50%;
}
.smaller-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 50%;
  order: 2;
}
.box-2 {
  order: 3;
  background-color: blue;
  height: 75px;
  width: 100%;
}
.box-3 {
  order: 4;
  background-color: green;
  height: 75px;
  width: 100%;
}
.smaller-container > .box5 {
  display: none;
}
.container > .box-5 {
  order: 6;
  background-color: orange;
  height: 150px;
  width: 100%;
}
@media screen and (max-width: 1000px) {
  .box-2 {
    height: 50px;
  }
  .box-3 {
    height: 50px;
  }
  .container > .box-4 {
    order: 6;
    background-color: purple;
    height: 150px;
    width: 100%;
  }
  .smaller-container > .box-5 {
    display: block;
    height: 50px;
    background-color: orange;
    width: 100%;
    order: 6;
  }
  .container > .box-5 {
    display: none;
  }
}
<div class="container">
  <div class="box-1"></div>
  <div class="smaller-container">
    <div class="box-2"></div>
    <div class="box-3"></div>
    <div class="box-5"></div>
  </div>
  <div class="box-4"></div>
  <div class="box-5"></div>
</div>

Revised Fiddle

Comments