如何以响应方式放置6个自举容器？

Question

我有6个这样放置的容器：

   *
 *   *
 * * *

每个*代表容器的位置。您将如何使这种布局具有响应性，以使它们最终彼此像下面这样：

*
*
*
*
*
*

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>