flexbox with multi column layout and mobile div box ordering - html

Question

I'm trying to create attached box layout with flexbox.
My example code is below.
My challenge is not mobile but desktop view - box item 1 and 2 are not 1 column in this layout. But once I use nesting like below then "order"doesn't work in flexbox.
parent "flex row" layout -> child "flex column" layout
I suppose "nest" with "mixed row and column flexbox" with "ordering"will not work together.
If someone has any idea to achieve it with flexbox, I want to get help..
.wrapper {
display: flex;
flex-direction: row;
flex-wrap:wrap;
margin: -10px -10px -10px 180px;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
}
.header {
background: tomato;
height: 60px;
width: 100%;
}
.breadcrumb{
background: green;
height: 30px;
width: 100%;
}
.footer {
background: lightgreen;
}
.main {
text-align: left;
background: deepskyblue;
flex: 1;
}
.aside-1 {
background: pink;
padding: 10px;
flex: 1;
}
.aside-2 {
background: gold;
padding: 10px;
flex: 1;
}
#media only screen and (max-width: 979px) {
.wrapper {
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex: 1;
flex: 1;
display:flex;
margin: -10px -10px -10px -10px ;
}
.main { order: 2; }
.aside-1 {
order :1;
}
.aside-2 {
order :3; }
.footer { order: 4; }
}
<div class="wrapper">
<header class="header">Header</header>
<div class="breadcrumb">Bread</div>
<div class="aside-1">Menuline1</div>
<div class="aside-2"><p>Menucontent</p>
<p>Menucontent</p>
<p>Menucontent</p>
<p>Menucontent</p>
<p>Menucontent</p>
<p>Menucontent</p>
<p>Menucontent</p></div>
<div class="main">
<p>Contents</p>
<p>Contents</p>
<p>Contents</p>
<p>Contents</p>
</div>
<footer class="footer">フッター</footer>
</div>

Answer 1

.wrapper {
margin: -10px -10px -10px 180px;
}
.wrapper > * {
padding: 10px;
}
.flex{
display: -webkit-box;/* Android4.3以前ブラウザ用 */
display: -webkit-flex;/* iOS8以前Safari用 */
display: flex;
flex-direction: row;
flex-wrap:wrap;
margin: -10px -20px -10px -10px;
flex: 1 100%;
}
.header {
background: tomato;
height: 60px;
width: 100%;
}
.breadcrumb{
background: green;
height: 30px;
width: 100%;
}
.footer {
background: lightgreen;
min-width: 100%;
}
.main {
-webkit-box-flex: 1;/*--- Android4.3以前ブラウザ用 ---*/
-webkit-flex: 1;/*--- iOS8以前Safari用 ---*/
flex: 1;
text-align: left;
background: deepskyblue;
flex: 1;
margin: -150px 0px 0px 0px;
}
.aside-1 {
background: pink;
padding: 10px;
max-width:320px;
height:130px;
}
.aside-2 {
-webkit-box-flex: 1;/*--- Android4.3以前ブラウザ用 ---*/
-webkit-flex: 1;/*--- iOS8以前Safari用 ---*/
flex: 1;
background: gold;
padding: 10px;
max-width:320px;
}
#media only screen and (max-width: 979px) {
.wrapper {
margin: -10px -10px -10px -10px ;
width:100%;
height:100%;
}
.flex{
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex: 1;
flex: 1;
display:flex;
}
.header{
height:10%;
}
.breadcrumb{
height:10%;
}
.aside-1
{
height: 10%;
min-width: 100%;
}
.main {
margin: 0 0 0 0 ;
order: 1; }
.aside-2 {
order :2;
min-width: 100%;}
}
<div class="wrapper">
<header class="header">ヘッダー画像</header>
<div class="breadcrumb">パンくずリスト</div>
<div class="aside-1">メニュー文言</div>
<div class="flex">
<div class="aside-2"><p>メニュー内容</p>
<p>メニュー内容</p>
<p>メニュー内容</p>
<p>メニュー内容</p>
<p>メニュー内容</p>
<p>メニュー内容</p>
<p>メニュー内容</p></div>
<div class="main">
<p>メインコンテンツがここに入ります</p>
<p>メインコンテンツがここに入ります</p>
<p>メインコンテンツがここに入ります</p>
<p>メインコンテンツがここに入ります</p>
</div>
</div>
<footer class="footer">フッター</footer>
</div>
As #yaycmyk said, box 3 needs absolute layout and to use flexbox only 2 and 3. It is not better solution but it can be one of solution... thank you guys and ladies.

Answer 2

I think you'll need to absolutely position box 3 conditionally to achieve this layout.