Flexbox - two small items next to one large

Question

I need to have a layout that looks like this on a mobile device

----- | 1 | ----- | 2 | ----- | 3 | ----- 

And how is it on the desktop:

 --------- | | 1 | | 2 |---| | | 3 | | |---- | | ----- 

I decided to use flexbox, my code so far:

 <div class="row"> <div class="col-xl secound">2</div> <div class="col-sm first">1<br>2<br>3<br>4</div> <div class="col-xl third">3</div> </div> .row { display: flex; flex-flow: row wrap; } .col-sm, .col-xl { width: 100%; } .col-sm { background: yellow; } .col-xl { &.secound { background: #ccc; } &.third { background: #aaa; } } @media (min-width: 700px) { .col-sm { width: 25%; background: yellow; order: 1; } .col-xl { width: 75%; &.secound { background: #ccc; order: 2; } &.third { background: #aaa; order: 3; } } } 

Unfortunately, I cannot move column "3" to "1". What should I do?

Codepen: http://codepen.io/tomekbuszewski/pen/PbprJP?editors=1100

Answer 1

You can try using float for desktop and use flexbox with order for mobile devices.

jsFiddle

 .item-1 {background:aqua;} .item-2 {background:gold;} .item-3 {background:pink;} .row { overflow: hidden; } .item { width: 50%; } .item-2 { float: left; } .item-1, .item-3 { overflow: hidden; } @media (max-width: 768px) { .row { display: flex; flex-direction: column; } .item { width: auto; float: none; } .item-1 { order: -1; } } 

 <div class="row"> <div class="item item-2">2<br><br><br></div> <div class="item item-1">1</div> <div class="item item-3">3</div> </div> 

Answer 2

You can align the .third right using the flex property justify-content .

You will look like this:

 .row{ display: flex; flex-flow: row wrap; justify-content: flex-end; } .row > div{ flex: 0 0 50%; } 

To change the order, you can use the order property:

 .first{ order: 1; } .second{ order: 2; } .third{ order: 3; } @media (min-width: 700px){ .first{ order: 2; } .second{ order: 1; } .third{ order: 3; } } 

Check script

In CSS-tricks, you can find a great guide to using Flex properties.

Answer 3

You can use float: right for all three elements. Together with appropriate width definitions in media queries this should work.

Answer 4

Grid:

 /* Column */ .item { width: 100%; } /* Wrap */ .row { display: flex; flex-flow: column wrap; } /* Responsive */ @media screen and (min-width: 700px){ .row { flex-flow: row wrap; justify-content: flex-end; } .item { width: 50%;} .item-1 { order: 2; } .item-2 { order: 1; } .item-3 { order: 3; } } /* Custom style */ .item { color: #fff; display: block; height: 200px; text-align: center; line-height: 200px; font-size: 3rem; } .item-1 { background: #00bcd5; } .item-2 { background:#8bc24a; } .item-3 { background:#fec107; } 

 <div class="row"> <div class="item item-1">1</div> <div class="item item-2">2</div> <div class="item item-3">3</div> </div> 

mesh with hook:

 /* Column */ .item { width: 100%; } /* Wrap */ .row { display: flex; flex-flow: column wrap; } .sub-row { display: none; } .item-1 { order: 1; } .item-2 { order: 2; } .item-3 { order: 3; } /* Responsive */ @media screen and (min-width: 500px){ .row { flex-flow: row wrap; justify-content: flex-end; } .sub-row { width: 50%; display: flex; flex-flow: column wrap; } .sub-row .item { width: 100%;} .item { width: 50%;} .hidden { display: none; } .item-2 { order: 1; } .sub-row { order: 2; } } /* Custom style */ .item { color: #fff; text-align: center; line-height: 200px; font-size: 3rem; } .item-1 { background: #00bcd5; } .item-2 { background:#8bc24a; } .item-3 { background:#fec107; } 

 <div class="row"> <div class="item item-2">2</div> <div class="sub-row"> <div class="item item-1">1</div> <div class="item item-3">3</div> </div> <div class="item hidden item-1">1</div> <div class="item hidden item-3">3</div> </div> 

Answer 5

There are a few things that I gave dimensions too, just for demonstration, but it will work without dimensions.

You will need to specify the size of the container, but it could be 100vh / 100vw or even a percentage rather than the actual pixels.

 body { margin: 0; } .container { display: flex; flex-wrap: wrap; flex-direction: column; height: 600px; width: 100%; } .item-1, .item-2, .item-3 { width: 100%; font-size: 80px; color: #fff; text-align: center; } .item-1 { line-height: 100px; height: 100px; background: #00bcd5; } .item-2 { line-height: 200px; height: 200px; background: #8bc24a; } .item-3 { line-height: 300px; height: 300px; background: #fec107; } @media (min-width: 700px) { .item-1, .item-2, .item-3 { width: 50%; } .item-1, .item-3 { order: 1; } .item-2 { height: 100%; line-height: 1em; } } 

 <div class="container"> <div class="item-1">1</div> <div class="item-2">2</div> <div class="item-3">3</div> </div> 

Hope this is what you are looking for.

Answer 6

How to use absolute position?

In your media query, change the .row class to this:

 .row { position: relative; align-items: flex-end; } 

And your .item-2 to:

  .item-2 { order: 1; position: absolute; top: 0; left: 0; } 

 /* Column */ .item { width: 100%; } /* Wrap */ .row { display: flex; flex-flow: column wrap; } /* Responsive */ @media screen and (min-width: 700px){ .row { position: relative; align-items: flex-end; } .item { width: 50%;} .item-1 { order: 2; } .item-2 { order: 1; position: absolute; top: 0; left: 0; } .item-3 { order: 3; } } /* Custom style */ .item { color: #fff; display: block; text-align: center; line-height: 200px; font-size: 3rem; } .item-1 { background: #00bcd5; } .item-2 { background:#8bc24a; } .item-3 { background:#fec107; } 

 <div class="row"> <div class="item item-1">1</div> <div class="item item-2">2 <br>2</div> <div class="item item-3">3</div> </div> 

---

Revised Codepen