CODEWITHSUNDEEP
htmlcssflexbox
koryakinp
koryakinp

Reputation: 4125

Flexbox responsive row column layout

I have the following

HTML

<div>
   <div class="left"></div>
   <div class="center"></div>
   <div class="right"></div>
</div>

I want to achieve the following layouts using flexbox.

Mobile

mobile layout

Tablet

tablet layout

Desktop

enter image description here

I have no problem with mobile and desktop layouts, but could not solve it for tablets.

How to force .center div appear after .letf and .right? Is there a way to achieve it with flexbox?

Upvotes: 20

Views: 31151

Answers (3)

user3589620
user3589620

Reputation:

With the usage of order and

@media(min-width:768px) {
  .flexbox {
    flex-flow: row nowrap;
  }
  ...
}

In total

.flexbox {
  display: flex;
  flex-direction: column;
  background: #565656;
  padding: 5px;
  align-content: space-between;
  justify-content: space-between;
}

.flexbox>div {
  text-align: center;
  padding: 20px 0;
  margin: 5px;
}

.flexbox>.left {
  background-color: #D30058;
}

.flexbox>.center {
  background-color: #36ABE1;
}

.flexbox>.right {
  background-color: #23B776;
}

@media(min-width:576px) {
  .flexbox {
    flex-flow: row wrap;
  }
  .flexbox>.left {
    order: 1;
    flex: 0.5;
  }
  .flexbox>.right {
    order: 2;
    flex: 0.5;
  }
  .flexbox>.center {
    order: 3;
    width: 100%;
  }
}

@media(min-width:768px) {
  .flexbox {
    flex-flow: row nowrap;
  }
  .flexbox>div {
    width: 33.33% !important;
  }
  .flexbox>.left {
    order: 1;
  }
  .flexbox>.center {
    order: 2;
  }
  .flexbox>.right {
    order: 3;
  }
}
<div class="flexbox">
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</div>

Upvotes: 11

TidyDev
TidyDev

Reputation: 3668

This code will achieve what you want in tablet, you can wrap it in a media query for tablet size.

The key is to set the width of left and right to 50%, center to 100% and then declare "flex-flow: row wrap;" on the container.

#container{
  display:flex;
  flex-flow: row wrap;
}
.left{
  order: 1;
  width:50%;
  background-color: red;
}
.right{
  order: 2;
  width:50%;
  background-color: green;
}
.center{
  order: 3;
  width:100%;
  background-color: blue;
}

<div id="container">
   <div class="left">left</div>
   <div class="center">center</div>
   <div class="right">right</div>
</div>

Here's a pen with a demo https://codepen.io/Washable/pen/ZXxYPJ

Upvotes: 26

agm1984
agm1984

Reputation: 17132

There is a flexbox property called order that could be useful here since you want the center div to come last: https://css-tricks.com/almanac/properties/o/order

There are probably other solutions too, but this is something you should know about :) Hint: you can use media queries to change the order as desired.

See also flex-flow: row wrap;

Upvotes: 3

Related Questions