Bootstrapで縦に並ぶcardを3列表示したい

bootstrapを用いて、画像のような表示をしたいです。
A列B列C列、列単位でcardを表示させるようなイメージです。
また、B列のみ1行目は1カラム、2行目は2カラム、3行目は1カラムのような形で交互で表示させたいと考えてます。

B列の1カラムと2カラムの表示がなかなかできず、お手数ではございますが、教えていただけますと大変助かります。

html
1<!-- A列 -->
2<div class="d-flex flex-column">
3    <div class="card" style="width: 18rem;">
4        <div class="card-body">
5            <h5 class="card-title">Special title treatment</h5>
6            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
7            <a href="#" class="btn btn-primary">Go somewhere</a>
8        </div>
9    </div>
10    
11    <div class="card text-center" style="width: 18rem;">
12        <div class="card-body">
13            <h5 class="card-title">Special title treatment</h5>
14            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
15            <a href="#" class="btn btn-primary">Go somewhere</a>
16        </div>
17    </div>
18    
19    <div class="card text-right" style="width: 18rem;">
20        <div class="card-body">
21            <h5 class="card-title">Special title treatment</h5>
22            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
23            <a href="#" class="btn btn-primary">Go somewhere</a>
24        </div>
25    </div>
26</div>
27
28<!-- B列 -->
29<div class="d-flex flex-column">
30    <div class="card" style="width: 18rem;">
31        <div class="card-body">
32            <h5 class="card-title">Special title treatment</h5>
33            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
34            <a href="#" class="btn btn-primary">Go somewhere</a>
35        </div>
36    </div>
37
38    <div class="card text-center" style="width: 18rem;">
39        <div class="card-body">
40            <h5 class="card-title">Special title treatment</h5>
41            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
42            <a href="#" class="btn btn-primary">Go somewhere</a>
43        </div>
44    </div>
45
46    <div class="card text-right" style="width: 18rem;">
47        <div class="card-body">
48            <h5 class="card-title">Special title treatment</h5>
49            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
50            <a href="#" class="btn btn-primary">Go somewhere</a>
51        </div>
52    </div>
53</div>
54
55<!-- C列 -->
56<div class="d-flex flex-column">
57    <div class="card" style="width: 18rem;">
58        <div class="card-body">
59            <h5 class="card-title">Special title treatment</h5>
60            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
61            <a href="#" class="btn btn-primary">Go somewhere</a>
62        </div>
63    </div>
64
65    <div class="card text-center" style="width: 18rem;">
66        <div class="card-body">
67            <h5 class="card-title">Special title treatment</h5>
68            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
69            <a href="#" class="btn btn-primary">Go somewhere</a>
70        </div>
71    </div>
72
73    <div class="card text-right" style="width: 18rem;">
74        <div class="card-body">
75            <h5 class="card-title">Special title treatment</h5>
76            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
77            <a href="#" class="btn btn-primary">Go somewhere</a>
78        </div>
79    </div>
80</div>

m.ts10806

2021/12/03 23:04

現状起きていること、問題点は何でしょう。

zlk1985

2021/12/04 00:42 編集

説明不足ですみません。質問に貼っている画像のB列のような表示のさせ方ができないことです。他に足りない情報などあれば教えてください。

Lhankor_Mhy

2021/12/06 04:26

4でしょうか？

Lhankor_Mhy

2021/12/06 04:37

また、ご提示の図ですとB列は4つのカードが合ってよさそうに思うのですが、ご提示のコードには3つしかないようでした。

zlk1985

2021/12/06 05:40

ありがとうございます。 4つ並べるということをしてみたのですが、2行目のみを横並びで2つ表示させる方法が分からず、断念いたしました。。

Lhankor_Mhy

2021/12/06 05:51

ということは、3つでいいということでかまいませんか？

zlk1985

2021/12/06 06:00

はい、大丈夫です。 3つか4つかによって実装が変わってくるのでしょうか？

Lhankor_Mhy

2021/12/06 06:04

3つだと3行目B列が空白になりますよね？各行はそろっていた方がいいのでしょうか？それですと、Bootstrap のグリッドシステムでは難しいのですが、Bootstrap の範囲がよろしいでしょうか？また、こちらのバージョンは4でいいのでしょうか？

zlk1985

2021/12/06 09:55

空白になります。 3行目の空白になる場所には、1行目と全く同じ要領で当てはめていくと認識だったのですが、認識違いますでしょうか？できれば揃っているのが望ましいです。できればBootstrapで実装したいと思っていましたが、難しい場合、他の手段でも大丈夫でございます。 Bootstrapのバージョンは4です。長々とやりとりありがとうございますm(._.)m

行動規範の内容に同意します

回答1件

ベストアンサー

「B列の3行目が空白になってよく、かつ各行がそろっていなくてもよい」という条件でしたら、以下のような感じでしょうか。
サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/8aLxbhdv/

html
1  <div class="row align-items-start">
2
3    <!-- A列 -->
4    <div class="col-4 row">
5      <div class="card col-12">
6        <div class="card-body">
7          <h5 class="card-title">Special title treatment</h5>
8          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
9          <a href="#" class="btn btn-primary">Go somewhere</a>
10        </div>
11      </div>
12
13      <div class="card text-center col-12">
14        <div class="card-body">
15          <h5 class="card-title">Special title treatment</h5>
16          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
17          <a href="#" class="btn btn-primary">Go somewhere</a>
18        </div>
19      </div>
20
21      <div class="card text-right col-12">
22        <div class="card-body">
23          <h5 class="card-title">Special title treatment</h5>
24          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
25          <a href="#" class="btn btn-primary">Go somewhere</a>
26        </div>
27      </div>
28    </div>
29
30    <!-- B列 -->
31    <div class="col-4 row">
32      <div class="card col-12">
33        <div class="card-body">
34          <h5 class="card-title">Special title treatment</h5>
35          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
36          <a href="#" class="btn btn-primary">Go somewhere</a>
37        </div>
38      </div>
39
40      <div class="card text-center col-6">
41        <div class="card-body">
42          <h5 class="card-title">Special title treatment</h5>
43          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
44          <a href="#" class="btn btn-primary">Go somewhere</a>
45        </div>
46      </div>
47
48      <div class="card text-right col-6">
49        <div class="card-body">
50          <h5 class="card-title">Special title treatment</h5>
51          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
52          <a href="#" class="btn btn-primary">Go somewhere</a>
53        </div>
54      </div>
55    </div>
56
57    <!-- C列 -->
58    <div class="col-4 row">
59      <div class="card col-12">
60        <div class="card-body">
61          <h5 class="card-title">Special title treatment</h5>
62          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
63          <a href="#" class="btn btn-primary">Go somewhere</a>
64        </div>
65      </div>
66
67      <div class="card text-center col-12">
68        <div class="card-body">
69          <h5 class="card-title">Special title treatment</h5>
70          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
71          <a href="#" class="btn btn-primary">Go somewhere</a>
72        </div>
73      </div>
74
75      <div class="card text-right col-12">
76        <div class="card-body">
77          <h5 class="card-title">Special title treatment</h5>
78          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
79          <a href="#" class="btn btn-primary">Go somewhere</a>
80        </div>
81      </div>
82    </div>
83
84  </div>