没有引导程序的CSS响应卡

Question

我想用html和CSS创建一个响应式卡片，而无需使用这样的引导程序：

sample card

非常感谢您！

Answer 1

最好像这样使用flex：

* {
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 100vh;
  flex-wrap: no-wrap;
}

.container div {
  width: 50%;
  height: 200px;
}

.picture {
  background: #4451c2;
}

.text {
  background: #f451c2;
}

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
  .container div {
    width: 100%;
  }
}

<div class="container">
  <div class="picture">picture</div>
  <div class="text">Some text is here</div>
</div>

使用@media规则，我们将width更改为100%，将flex-order更改为column。

P.S .：不用注意方块的高度，这只是例如解决屏幕尺寸问题的方法。