使用 Flexbox 的响应式两列布局

Question

我想用flex实现这个结构：

这是响应式的，在较小的屏幕上它看起来像这样：

请注意，移动设备上的第一个 div 是第二个。

这是我的代码：

.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>

我实现第一个结构的唯一方法是在容器 div 中添加第二个和第三个 div，但我不知道如何绕过它来显示第二个div 作为第一个在小屏幕上，我认为所有三个 div 应该在同一级别，但是，这样做我不知道如何实现第一个结构。

我该如何解决这个问题？

Answer 1

这是一个网格作业，IE11 将需要一个旧的和特定的语法并设置网格中的每个元素（没有可用的自动流放置:( )

至运行 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>

使用 Flexbox 的响应式两列布局

Responsive two columns layout with Flexbox

html

css

flexbox

internet-explorer-11