没有bootstrap的CSS响应卡

Question

我想在html和CSS中创建一个响应式卡，而不使用像这样的bootstrap：

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。：不要注意块的高度，这只是例如如何解决屏幕尺寸问题。