Responsive two columns layout with Flexbox

Question

I want to achieve this structure using flex:

Which is responsive, on smaller screens it will look like this:

Please notice that the first div on mobile is the second one.

This is my code:

.card {
    padding: 24px;
    display: flex;
    width: 400px;
    background-color: #D9FBFF;
    border-radius: 8px;
}

.right {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  
}

.div3 {
  margin-top: auto;
}

.price {
    display: flex;
    align-items: baseline;
    font-size: 20px;
    font-weight: bold;
}

.unit {
  margin-left: 6px;
  font-size: 16px;
  font-weight: normal;
}

.tag {
    background: #D9DEEA;
    border-radius: 7.5px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    display: inline-block;
    padding: 0 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold;
}

.div3 {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: auto;
    display: flex;
}

li:not(:last-child)::after {
    content: "";
    border-right: 1px solid #D9DEEA;
    height: 14px;
    margin: 0 12px;
}

h2 {
  margin:0;
  margin-bottom: 8px;
}

@media screen and (max-width: 800px) {
  .card {
    flex-direction: column;
  }
  .card > div {
    width: 100%;
  }
  .right {
      align-items: flex-start;
  }
  .div2 {
    margin-bottom: 6px;
  }
  .div1 {
    margin-bottom: 12px;
  }
  
}

<article class="card">
  <div class="div1">
    <h2>This is a title</h2>
    <div class="price">
      <div>800</div>
      <div class="unit">EUR</div>
    </div>
  </div>
  <div class="right">
    <div classs="div2">
      <span class="tag">40% discount</span>
    </div>
    <div class="div3">
      <ul>
        <li>
          <a href="#">LINK 1</a>
        </li>
        <li>
          <a href="#">LINK 2</a>
        </li>
      </ul>
    </div>
  </div>
</article>

The only way I could achieve the first structure is by adding the second and third div inside a container div, but I don't know how to get around that to display the second div as the first one on smaller screens, I think all three divs should be in the same level, but, by doing that I don't know how can I achieve the first structure.

How can I solve this ?

You can use **order** property inside media query. See here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items — AbsoluteBeginner, Nov 25 '20 at 20:50
IE11 requires to tell which cells each element have to stand in it, it can be done for IE11 even if that a 10 years old browser. — G-Cyrillus, Nov 25 '20 at 20:54
here is an example for IE11 , https://jsbin.com/sejazibipu/1/edit?css,output (jsbin runs with IE11) — G-Cyrillus, Nov 25 '20 at 21:16
@Paulie,not sure the duplicate matches IE11 requirement with grid, flex requires some js to set height anyway. — G-Cyrillus, Nov 25 '20 at 21:20

G-Cyrillus · Accepted Answer · 2020-11-25T22:34:53.803

This is a grid job, IE11 will require an old and specific syntax and to set each element in the grid (no auto-flow placement avalaible :( )

To run the demo in IE11 : https://jsbin.com/sejazibipu/1/edit?css,output

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
section {
  display: grid;
  grid-template-columns: 3fr 4fr;
  padding: 5vh;
  grid-gap: 5vh;
  margin: auto;
}
section > * {
  border: solid;
  min-height: 40vh; /* demo purpose*/
}
aside {
  grid-row: auto / span 2;
}
@media (max-width: 768px) {
  section {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  section > * {
    grid-row: auto/ span 1;
    min-height: 25vh; /* demo purpose*/
  }
  div:nth-child(2) {
    order: -1;
  }
}

/*  IE */
section {
  display: -ms-grid;
  -ms-grid-columns: 3fr 2.5vh 4fr;
  -ms-grid-rows: auto 2.5vh auto;
}

aside {
  -ms-grid-row-start: 1;
  -ms-grid-row-span: 3;
  -ms-grid-column: 1;
}
div:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
div:nth-child(3) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}

@media (max-width: 768px) {
  section {
    -ms-grid-columns: 1fr;
    -ms-grid-rows: auto 2.5vh auto 2.5vh auto;
  }
  section > * {
    -ms-grid-row-span: 1;
    min-height: 25vh; /* demo purpose*/
  }
  aside {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  div:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  div:nth-child(3) {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
  }
}

<section>
  <aside> 1</aside>
  <div> 2</div>
  <div> 3</div>
</section>

Responsive two columns layout with Flexbox

1 Answers1