在移动设备上堆叠的水平盒子 - 以图像，标题文本和细节文本为中心

Question

难以概念化如何制作这组盒子。它们需要水平和居中，但堆叠在较小的屏幕尺寸上。还需要将图像和两种文本居中。欣赏你的想法！

到目前为止我所拥有的： 需要从主容器开始并在其中容纳所有4个盒子。不确定如何在较小的屏幕上获得水平显示或堆叠功能。还不确定如何将内容集中在每个框内 - 不确定我是否应该在框内使用静态或动态格式。

Answer 1

如果您不想沿着引导程序（或其他网格布局）路线走下去，我建议使用弹性和媒体查询。

HTML：

<div class="wrapper">
  <div class="box">
    <div class="image">Image</div>
    <h1>Title Text</h1>
    <div>detailed text that explains what the title means</div>
  </div>

  <div class="box">
    <div class="image">Image</div>
    <h1>Title Text</h1>
    <div>detailed text that explains what the title means</div>
  </div>

  <div class="box">
    <div class="image">Image</div>
    <h1>Title Text</h1>
    <div>detailed text that explains what the title means</div>
  </div>

  <div class="box">
    <div class="image">Image</div>
    <h1>Title Text</h1>
    <div>detailed text that explains what the title means</div>
  </div>
</div>

CSS：

.wrapper {
  display: flex;
  flex-direction: column;
}

.box {
  width: 100%;
  padding: 10px;
  text-align: center;
  border: 1px solid black;
}

.image {
  display: inline-block;
  background: black;
  color: white;
  padding: 10px;
}

@media (min-width: 600px) {
  .wrapper {
    flex-direction: row;
  }

  .box {
    width: auto;
    flex-grow: 1;
  }

}

https://codepen.io/anon/pen/GvMPQe

Answer 2

结帐bootstrap。它是一个响应式插件，用于许多网站，包括Twitter。强烈推荐并且非常适合设计多平台网站。