Writing Flexbox Code for 2-Column and 3-Column on Desktop and Mobile (Wrap)

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>

CSS flexbox 3 columns desktop to 2 columns tablet with re-ordering of flex items

Please note Michael_B's solution is the proper flexbox one. This one uses position:absolute and margin-right for positioning on mobile devices, for the special case when the height of the parent cannot be pre-determined or hard-coded in CSS.

body { padding: 0; margin: 0;}.wrapper {  display: flex;  align-items: flex-start;}.wrapper > * {  padding: .5em;  font-size: 1.5rem;  line-height: 1.5em;  color: white;  flex: 1 0 auto;  box-sizing: border-box;}
.premiumContent {  background-color: red;  line-height: 3em;}.aside1Content {  order: -1;  background-color: blue;}.aside2Content {  background-color: green;}@media (max-width: 800px) {  .wrapper {    display: flex;    flex-direction: column;    flex-wrap: wrap;    align-items: stretch;    position: relative;  }  .wrapper > * {    padding: .5em;    font-size: 1.5rem;    line-height: 1.5em;    color: white;    flex: 1 0 auto;    margin-right: 50%;  }  .wrapper .premiumContent {    min-width: 50%;    min-height: 100%;    order: 3;    width: 50%;    position: absolute;    right: 0;    height: auto;    flex-grow: 0;    align-self: initial;    margin-right: 0;  }  .aside1Content {    order: initial;    background-color: blue;  }}

<div class="wrapper">  <div class="premiumContent">premium</div>  <div class="aside1Content">aside 1</div>  <div class="aside2Content">aside 2</div></div>

1, 2, 3 Column Layout From Mobile to Desktop With Flex

First you forgot , on your CSS first line, you should write:
.tablet-middle, .tablet-bottom instead of .tablet-middle .tablet-bottom.

For the desktop, go like inline-flex,

On the wrapper in your media queries add:

.content-wrapper{
    display:flex;
    flex-direction: column;
  }

DEMO

.content-wrapper{
  display: flex;
}

/*mobile*/
@media (min-width: 0) and (max-width: 425px) {
  .content-wrapper{
    display:flex;
    flex-direction: column;
  }
  .tablet-top, .tablet-middle, .tablet-bottom {
    display:flex;
    flex-direction: column;
  }
}

/*tablet*/
@media (min-width: 426px) and (max-width: 767px) {
  .content-wrapper{
    display:flex;
    flex-direction: column;
  }
  .tablet-top, .tablet-middle, .tablet-bottom {
    display:flex;
    flex-direction: row;
  }
}

<div class="content-wrapper">
  <div class="tablet-top">
    <div class="dog"><img src="https://i.imgur.com/RJdUaQ0.png" height="100" width="140"/></div>
    <div class="cat"><img src="https://i.imgur.com/bHoUb1x.png" height="100" width="140"/></div>
  </div>
  <div class="tablet-middle">
    <div class="mouse"><img src="https://i.imgur.com/IqUglWY.png" height="100" width="140"/></div>
    <div class="snake"><img src="https://i.imgur.com/IHaFNSs.png" height="100" width="140"/></div>
  </div> 
  <div class="tablet-bottom">
    <div class="cow"><img src="https://i.imgur.com/JTFwdZT.png" height="100" width="140"/></div>
    <div class="pig"><img
src="https://i.imgur.com/rzKcrup.png"
height="100" width="140"/></div>
  </div>
</div>

Flexbox layout with two columns on desktop and one column on mobile

Since you don't have any weird switch of columns from mobile to desktop, what I'd do is this (and I believe is the cleanest way)

Start thinking mobile first (mobile first IS best practice) and then use media queries for desktop version. Basically set your container to display block and set the width of both columns inside it to 100%. then on desktop, make your container flex with a query.

CSS:

#flexContainer {
  display: block;
  background-color: blue;
}

@media only screen and (min-width: 1024px) {
  #flexContainer {
    display: flex;
  }
}

Or as I would do it in SCSS:

#flexContainer {
  display: block;
  background-color: blue;

     @media only screen and (min-width: 1024px) {
        display: flex;
     }
}

Three div / two column layout - possible with Flexbox?

Although CSS Grid would be the best approach to achieve the lay-out you want, it is possible using CSS Flexbox.

You just have to create a wrapper div with three divs inside (when doing a mobile first approach) and with .content set to flex: 1 to stretch out the height of your viewport.

Then for desktop (in this case @media screen and (min-width: 1000px)), change the order (MDN reference of order) of .navigation and .content and give all three divs appropriate widths according to their needs. The only change to div.wrapper is that it needs flex-flow: column wrap to wrap correctly.

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
}

.box {
  display: flex;
}

.content {
  flex: 1;
}

@media screen and (min-width: 1000px) {
  .wrapper {
    flex-flow: column wrap;
  }
  
  .navigation {
    order: 2;
  }
  
  .content {
    order: 3;
  }
  
  .image,
  .navigation {
    width: 200px;
    flex: 50%;
  }
  
  .content {
    width: calc(100% - 200px);
    flex: 0 0 100%;
  }
}

/* Generic styling */

html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

.image {
  background: orange;
  height: 60px;
}

.content {
  background: lightblue;
}

.navigation {
  background: lightgreen;
  height: 60px;
}

<div class="wrapper">
  <div class="box image">Image</div>
  <div class="box content">Content</div>
  <div class="box navigation">Navigation</div>
</div>

How to wrap four columns into two rows of two columns with flexbox?

Simply add flex-wrap:wrap to allow element to go to the next line if there is no enough space and consider media query if you want to control when the break will happen:

.flex-row {  display: flex;  flex: 1;  flex-direction: row;  flex-wrap: wrap;}
.flex-col {  margin: 6px;  padding: 16px;  background-color: red;  display: flex;  justify-content: center;  align-items: center;  flex: 1;  flex-direction: column;  color: white;  box-sizing:border-box;}
@media (max-width:767px) {  .flex-col {    flex-basis: calc(50% - 12px);  }}
@media (max-width:460px) {  .flex-col {    flex-basis: 100%;  }}

<div class="flex-row">  <div class="flex-col">Assertively negotiate interoperable portals without cross functional process improvements. Dramatically incentivize tactical best practices with.</div>  <div class="flex-col">Seamlessly grow competitive.</div>  <div class="flex-col">Distinctively optimize user-centric mindshare vis-a-vis plug-and-play infomediaries. Seamlessly optimize impactful solutions and enabled infrastructures.</div>  <div class="flex-col">Dynamically extend flexible catalysts for change via pandemic supply chains. Efficiently.</div></div>

Flexbox 3 divs, two columns, one with two rows

The Legit Method:
*Recommended

.flex-row {
    flex-direction: row;
    display: flex;
}

.flex-column {
    flex-direction: column;
    display: flex;
}

.flex-body {
    display: flex;
}

.flex-body div:not([class*="flex"]) {
    border: 1px solid white;
    flex: 1 1 200px;
    width: 300px;
}

<div class="flex-body">
  <div class="flex-row">
    <div style="background: #0980cc;"></div>
  </div>
  <div class="flex-column">
    <div style="background: #09cc69;"></div>
    <div style="background: #cc092f;"></div>
  </div>
</div>

---

Related Topics