code-base-design.html.erb

<div class="container-fluid py-4">
  <div class="row">
    <div class="col-sm-7 col-lg-9 order-sm-2">
      <div class="card bg-dark border-dark rounded-lg">
        <div class="card-header bg-info">
          <h3 class="card-title">Foobar</h3>
        </div>
        <div class="card-body">
          <div class="container py-2">
            <div class="card bg-dark border-dark">
              <div class="card-header border-secondary">
                <h5 class="card-title">説明</h5>
              </div>
              <div class="card-body">
                <p>あああああ</p>
              </div>
            </div>
          </div>
          <div class="container py-2">
            <div class="card bg-dark border-dark">
              <div class="card-header border-secondary">
                <h5 class="card-title">説明</h5>
              </div>
              <div class="card-body">
                <p>あああああ</p>
              </div>
            </div>
          </div>
        </div>
        <div class="card-footer">
          <p class="float-left">あああああ</p>
          <p class="float-right">いいいいい</p>
        </div>
      </div>
    </div>
    <div class="container d-sm-none py-2"></div>
    <div class="col-sm-5 col-lg-3 order-sm-1">
      <div class="card bg-dark border-dark rounded-lg">
        <div class="card-header bg-success">
          <h3 class="card-title">Foobar</h3>
        </div>
        <div class="card-body">
          <p>aaa</p>
          <p>bbb</p>
        </div>
      </div>
    </div>
  </div>
</div>