モバイルの画面サイズに合わせて画像を縮小して並べるには

質問が多くてすみません。
（現在独学でBootstrapを参考してHPを制作しています。）

表題の通り、モバイルの画面サイズに合わせて画像を縮小して「以下の理想（モバイル版）」のように並べるにはどうしたら良いか教授いただきたいです。

よろしくお願い致します。

■HP版

■モバイル版

■理想（モバイル版）

HTML
1    <section id="Photos" class="Photos">
2      <div class="container">
3
4        <div class="section-title" data-aos="fade-up">
5          <h2>Photos</h2>
6        </div>
7
8        <div class="row" data-aos="fade-up" data-aos-delay="100">
9          <div class="col-lg-12 d-flex justify-content-center">
10            <ul id="Photos-flters">
11              <li data-filter="*" class="filter-active">All</li>
12              <li data-filter=".filter-Outside">肉食</li>
13              <li data-filter=".filter-Inside">草食</li>
14              <li data-filter=".filter-Machine">他</li>
15            </ul>
16          </div>
17        </div>
18
19        <div class="row Photos-container" data-aos="fade-up" data-aos-delay="200">
20
21          <div class="col-lg-4 col-md-6 Photos-item filter-Outside">
22            <div class="Photos-wrap">
23              <img src="assets/img/Photos/Photos-1.jpg" class="img-fluid" alt="">
24              <div class="Photos-info">
25                <h4>動物１</h4>
26                <div class="Photos-links">
27                  <a href="assets/img/Photos/Photos-1.jpg" data-gallery="PhotosGallery" class="Photos-lightbox" title="動物１"><i class="bx bx-plus"></i></a>
28                  <a href="Photos-details.html" title="More Details"><i class="bx bx-link"></i></a>
29                </div>
30              </div>
31            </div>
32          </div>
33
34          <div class="col-lg-4 col-md-6 Photos-item filter-Inside">
35            <div class="Photos-wrap">
36              <img src="assets/img/Photos/Photos-2.jpg" class="img-fluid" alt="">
37              <div class="Photos-info">
38                <h4>動物２</h4>
39                <div class="Photos-links">
40                  <a href="assets/img/Photos/Photos-2.jpg" data-gallery="PhotosGallery" class="Photos-lightbox" title="動物２"><i class="bx bx-plus"></i></a>
41                  <a href="Photos-details.html" title="More Details"><i class="bx bx-link"></i></a>
42                </div>
43              </div>
44            </div>
45          </div>
46
47          <div class="col-lg-4 col-md-6 Photos-item filter-Machine">
48            <div class="Photos-wrap">
49              <img src="assets/img/Photos/Photos-3.jpg" class="img-fluid" alt="">
50              <div class="Photos-info">
51                <h4>動物３</h4>
52                <div class="Photos-links">
53                  <a href="assets/img/Photos/Photos-3.jpg" data-gallery="PhotosGallery" class="Photos-lightbox" title="動物３"><i class="bx bx-plus"></i></a>
54                  <a href="Photos-details.html" title="More Details"><i class="bx bx-link"></i></a>
55                </div>
56              </div>
57            </div>
58          </div>
59
60          <div class="col-lg-4 col-md-6 Photos-item filter-Outside">
61            <div class="Photos-wrap">
62              <img src="assets/img/Photos/Photos-4.jpg" class="img-fluid" alt="">
63              <div class="Photos-info">
64                <h4>動物４</h4>
65                <div class="Photos-links">
66                  <a href="assets/img/Photos/Photos-4.jpg" data-gallery="PhotosGallery" class="Photos-lightbox" title="動物４"><i class="bx bx-plus"></i></a>
67                  <a href="Photos-details.html" title="More Details"><i class="bx bx-link"></i></a>
68                </div>
69              </div>
70            </div>
71          </div>
72
73          <div class="col-lg-4 col-md-6 Photos-item filter-Inside">
74            <div class="Photos-wrap">
75              <img src="assets/img/Photos/Photos-5.jpg" class="img-fluid" alt="">
76              <div class="Photos-info">
77                <h4>動物５</h4>
78                <div class="Photos-links">
79                  <a href="assets/img/Photos/Photos-5.jpg" data-gallery="PhotosGallery" class="Photos-lightbox" title="動物５"><i class="bx bx-plus"></i></a>
80                  <a href="Photos-details.html" title="More Details"><i class="bx bx-link"></i></a>
81                </div>
82              </div>
83            </div>
84          </div>
85
86          <div class="col-lg-4 col-md-6 Photos-item filter-Machine">
87            <div class="Photos-wrap">
88              <img src="assets/img/Photos/Photos-6.jpg" class="img-fluid" alt="">
89              <div class="Photos-info">
90                <h4>動物６</h4>
91                <div class="Photos-links">
92                  <a href="assets/img/Photos/Photos-6.jpg" data-gallery="PhotosGallery" class="Photos-lightbox" title="動物６"><i class="bx bx-plus"></i></a>
93                  <a href="Photos-details.html" title="More Details"><i class="bx bx-link"></i></a>
94                </div>
95              </div>
96            </div>
97          </div>
98        </div>
99      </div>
100    </section><!-- End Portfolio Section -->

CSS
1.Photos .section-title h2{
2  font-size: 70px;
3  font-weight: 700;
4}
5
6.Photos .Photos-item {
7  margin-bottom: 30px;
8}
9
10.Photos #Photos-flters {
11  padding: 0;
12  margin: 0 auto 25px auto;
13  list-style: none;
14  text-align: center;
15}
16
17.Photos #Photos-flters li {
18  cursor: pointer;
19  display: inline-block;
20  padding: 10px 18px 12px 18px;
21  font-size: 14px;
22  font-weight: 400;
23  line-height: 1;
24  text-transform: uppercase;
25  color: #555555;
26  transition: all 0.3s ease-in-out;
27  margin: 0 4px 10px 4px;
28  background: whitesmoke;
29  border-radius: 4px;
30}
31
32.Photos #Photos-flters li:hover, .Photos #Photos-flters li.filter-active {
33  background: #7cc576;
34  color: #fff;
35}
36
37.Photos #Photos-flters li:last-child {
38  margin-right: 0;
39}
40
41.Photos .Photos-wrap {
42  transition: 0.3s;
43  position: relative;
44  overflow: hidden;
45  z-index: 1;
46  background: rgba(0, 0, 0, 0.6);
47}
48
49.Photos .Photos-wrap::before {
50  content: "";
51  background: rgba(21, 21, 21, 0.6);
52  position: absolute;
53  left: 30px;
54  right: 30px;
55  top: 30px;
56  bottom: 30px;
57  transition: all ease-in-out 0.3s;
58  z-index: 2;
59  opacity: 0;
60}
61
62.Photos .Photos-wrap .Photos-info {
63  opacity: 0;
64  position: absolute;
65  top: 0;
66  left: 0;
67  right: 0;
68  bottom: 0;
69  text-align: center;
70  z-index: 3;
71  transition: all ease-in-out 0.3s;
72  display: flex;
73  flex-direction: column;
74  justify-content: center;
75  align-items: center;
76}
77
78.Photos .Photos-wrap .pPhotos-info::before {
79  display: block;
80  content: "";
81  width: 48px;
82  height: 48px;
83  position: absolute;
84  top: 35px;
85  left: 35px;
86  border-top: 3px solid #fff;
87  border-left: 3px solid #fff;
88  transition: all 0.5s ease 0s;
89  z-index: 9994;
90}
91
92.Photos .Photos-wrap .Photos-info::after {
93  display: block;
94  content: "";
95  width: 48px;
96  height: 48px;
97  position: absolute;
98  bottom: 35px;
99  right: 35px;
100  border-bottom: 3px solid #fff;
101  border-right: 3px solid #fff;
102  transition: all 0.5s ease 0s;
103  z-index: 9994;
104}
105
106.Photos .Photos-wrap .Photos-info h4 {
107  font-size: 20px;
108  color: #fff;
109  font-weight: 600;
110}
111
112.Photos .Photos-wrap .Photos-info p {
113  color: #ffffff;
114  font-size: 14px;
115  text-transform: uppercase;
116  padding: 0;
117  margin: 0;
118}
119
120.Photos .Photos-wrap .Photos-links {
121  text-align: center;
122  z-index: 4;
123}
124
125.Photos .Photos-wrap .Photos-links a {
126  color: #fff;
127  margin: 0 2px;
128  font-size: 28px;
129  display: inline-block;
130  transition: 0.3s;
131}
132
133.Photos .Photos-wrap .Photos-links a:hover {
134  color: #7cc576;
135}
136
137.Photos .Photos-wrap:hover::before {
138  top: 0;
139  left: 0;
140  right: 0;
141  bottom: 0;
142  opacity: 1;
143}
144
145.Photos .Photos-wrap:hover .Photos-info {
146  opacity: 1;
147}
148
149.Photos .Photos-wrap:hover .Photos-info::before {
150  top: 15px;
151  left: 15px;
152}
153
154.Photos .Photos-wrap:hover .Photos-info::after {
155  bottom: 15px;
156  right: 15px;
157}

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

回答1件

ベストアンサー

現在col-lg-4 col-md-6となっているところをcol-xs-6 col-md-4に変更でどうでしょうか。
スマホ表示（prefixがxs）の時は、1カラムの幅が12分の6（半分）なので、1行に2枚ずつ並ぶ設定になります。
PC表示（prefixがmd）の時は、1カラムの幅が12分の4なので、1行に3枚ずつ並ぶ設定です。

★追記
col-xs-*の記述はBootsrap4以降使え無くなっているようです。
https://getbootstrap.com/docs/4.1/layout/grid/#grid-options

Bootsrap4以降をご利用の場合は、col-6 col-md-4でご希望の表示になるかと思います。

投稿2021/03/29 07:09

編集2021/03/30 03:04

mai1210

総合スコア272

kumalike

2021/03/29 09:54

mai1210様コメントありがとうございます「col-lg-4 col-md-6」を「col-xs-6 col-md-4」に変更して見ましたが、改善しませんでした。HTML他に修正するべきことありますでしょうか？

mai1210

2021/03/30 03:02

Bootstrap4以降を使われていますでしょうか？ Bootstrap4から記載方法が変わっており、「col-xs-」が無くなったようです。（Bootstrap3までは使用可） https://getbootstrap.com/docs/4.1/layout/grid/#grid-options 今回の内容だと、「col-6 col-md-4」でうまくいくのではないかと思います。

kumalike

2021/03/30 07:19

mai1210様コメントありがとうございます。 Bootstrap5を使っております。おかげさまで理想の通り改善できました。お陰様で新しいことを勉強になりましたm(_ _)m

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