Writing flexbox code for 2-column and 3-column on desktop and mobile (wrap)
Here's how you do it for the three columns. I'm only adding that, because it's a bit more tricky:
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
}
.left {
order: 1;
background: red;
flex-basis: 100%;
height: 300px
}
.middle {
order: 3;
background: green;
flex-basis: 100%;
height: 300px;
}
.right {
order: 2;
background: yellow;
flex-basis: 100%;
height: 300px;
}
@media screen and (min-width:600px) {
.container {
flex-wrap: nowrap;
}
.left {
flex-basis: 200px;
order: 1;
}
.middle {
flex-basis: 1;
order: 2;
}
.right {
flex-basis: 200px;
order: 3;
}
}
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
And the fiddle http://jsfiddle.net/2touox81/
As you can see, you can set column order for flex items.
Hope this helps.
I will assume desktop means screen wider than 600px, mobile less.
The 2-column layout is very simple:
body {
display: flex; /* Magic begins */
flex-wrap: wrap; /* Allow multiple lines */
}
#left, #right {
flex: 1 300px; /* Initial width of 600px/2
Grow to fill remaining space */
min-width: 0; /* No minimal width */
}
body {
display: flex;
flex-wrap: wrap;
text-align: center;
font-weight: bold;
}
#left, #right {
flex: 1 300px;
min-width: 0;
background: #f55;
padding: 15px 0;
}
#right {
background: #57f;
}
<div id="left">Left</div>
<div id="right">Right</div>
The 3-column is only a bit more complex:
body {
display: flex; /* Magic begins */
}
#left, #right, #middle {
min-width: 0; /* No minimal width */
}
#left, #right {
flex-basis: 200px; /* Initial width */
}
#middle {
flex: 1; /* Take up remaining space */
}
@media screen and (max-width: 600px) { /* Mobile */
body {
flex-direction: column; /* Column layout */
}
#left, #right {
flex-basis: auto; /* Unset previous 200px */
}
#middle {
order: 1; /* Move to the end */
}
}
body {
display: flex;
text-align: center;
font-weight: bold;
}
#left, #right, #middle {
min-width: 0;
padding: 15px 0;
}
#left, #right {
flex-basis: 200px;
background: #f55;
}
#right {
background: #57f;
}
#middle {
flex: 1;
background: #5f6;
}
@media screen and (max-width: 600px) {
body {
flex-direction: column;
}
#left, #right {
flex-basis: auto;
}
#middle {
order: 1;
}
}
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>