Flexbox - two small items next to one large

Question

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

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

And like this on 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 can't slide column "3" under "1". What should I do?

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

Answer 1

You can try using float for desktop, and using flexbox with order set for mobile.

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 could align .third on the right by using flex property justify-content.

You're CSS would look something like this:

.row{
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
}

.row > div{
  flex: 0 0 50%;
}

For changing 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 the fiddle

On CSS-tricks you can find a great guide for using Flex properties.