html - 如何以响应方式定位 6 个引导容器？

Question

我有 6 个容器，它们的位置如下：

   *
 *   *
 * * *

其中每个*代表容器的定位。您如何使此布局具有响应性，以便它们最终成为彼此下方的一个，如下所示：

*
*
*
*
*
*

标签： htmlcsstwitter-bootstrap

Answer 1

.row > .col-sm-4 {
  background: #eee;
  margin-top: 1em;
  margin-bottom: 1em;
  padding-top: 1em;
  padding-bottom: 1em;
  outline: 1px solid #ddd
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-sm-4 offset-sm-4">1. Lorem ipsum...</div>
    <div class="w-100"></div>
    <div class="col-sm-4">2. Lorem ipsum...</div>
    <div class="col-sm-4 offset-sm-4">3. Lorem ipsum...</div>
    <div class="col-sm-4">4. Lorem ipsum...</div>
    <div class="col-sm-4">5. Lorem ipsum...</div>
    <div class="col-sm-4">6. Lorem ipsum...</div>
  </div>
</div>