モバイル表示時に要素を縦に2つずつ表示したい
スマホでこのページを表示するときに、現在のコードだと要素が縦に一つずつ表示する仕様なんですが、それだと長過ぎるので横に要素を2つずつ表示させたいです。
しかしcssの関連していそうな部分を試行錯誤してみてもうまくいかず質問させて頂きます
希望表示画像↓(2つずつ縦に表示)
該当のソースコード
html
1<head> 2 <link rel="stylesheet" href="css/bootstrap.css"> 3 <link rel="stylesheet" href="css/fonts.css"> 4 <link rel="stylesheet" href="css/style.css"> 5</head> 6 7 <body> 8 <div class="page text-center"> 9 <section class="section text-center bg-default"> 10 <div class="container"> 11 <div class="row justify-content-sm-center justify-content-md-start offset-top-0"> 12 <div class="col-sm-10 col-md-7 section-image-aside section-image-aside-right"> 13 <div class="section-image-aside-img d-none d-md-block view-animate zoomInSmall delay-04" style="background-image: url(images/home-01-846x1002.jpg)"></div> 14 <div class="section-image-aside-body section-xl inset-lg-right-70 inset-xl-right-110"> 15 <h2 class="home-headings-custom fw-bold view-animate fadeInLeftSm delay-04"><span class="first-word">Our</span> Features</h2> 16 <div class="offset-top-35 offset-md-top-60 view-animate fadeInLeftSm delay-06">Jonathan Carroll University was founded on the principle that by pursuing big ideas and sharing what we learn, we make the world a better place. For more than 135 years, we haven’t strayed from that vision.</div> 17 <div class="text-center text-sm-start"> 18 <div class="row row-65 justify-content-sm-center justify-content-lg-start offset-top-65 counters"> 19 <div class="col-sm-6 view-animate fadeInLeftSm delay-08"> 20 <!-- Counter type 1--> 21 <div class="unit flex-column flex-sm-row unit-responsive-md counter-type-2"> 22 <div class="unit-left"><span class="icon icon-md text-madison mdi mdi-school"></span></div> 23 <div class="unit-body"> 24 <div class="h3 fw-bold text-primary"><span class="counter" data-speed="1300">15</span><span></span></div> 25 <div class="offset-top-3"> 26 <h6 class="text-black font-accent fw-bold">Awards</h6> 27 </div> 28 </div> 29 </div> 30 </div> 31 <div class="col-sm-6 view-animate fadeInLeftSm delay-04"> 32 <!-- Counter type 1--> 33 <div class="unit flex-column flex-sm-row unit-responsive-md counter-type-2"> 34 <div class="unit-left"><span class="icon icon-md text-madison mdi mdi-wallet-travel"></span></div> 35 <div class="unit-body"> 36 <div class="h3 fw-bold text-primary"><span class="counter" data-speed="1250">30</span><span>+</span></div> 37 <div class="offset-top-3"> 38 <h6 class="text-black font-accent fw-bold">Certified Teachers</h6> 39 </div> 40 </div> 41 </div> 42 </div> 43 <div class="col-sm-6 view-animate fadeInLeftSm delay-1"> 44 <!-- Counter type 1--> 45 <div class="unit flex-column flex-sm-row unit-responsive-md counter-type-2"> 46 <div class="unit-left"><span class="icon icon-md text-madison mdi mdi-domain"></span></div> 47 <div class="unit-body"> 48 <div class="h3 fw-bold text-primary offset-top-5"><span class="counter" data-step="500">10</span></div> 49 <div class="offset-top-3"> 50 <h6 class="text-black font-accent fw-bold">Featured Programs </h6> 51 </div> 52 </div> 53 </div> 54 </div> 55 <div class="col-sm-6 view-animate fadeInLeftSm delay-06"> 56 <!-- Counter type 1--> 57 <div class="unit flex-column flex-sm-row unit-responsive-md counter-type-2"> 58 <div class="unit-left"><span class="icon icon-md text-madison mdi mdi-account-multiple-outline"></span></div> 59 <div class="unit-body"> 60 <div class="h3 fw-bold text-primary offset-top-5"><span class="counter" data-step="1500">6510</span></div> 61 <div class="offset-top-3"> 62 <h6 class="text-black font-accent fw-bold">Students</h6> 63 </div> 64 </div> 65 </div> 66 </div> 67 </div> 68 </div> 69 </div> 70 </div> 71 </div> 72 </div> 73 </section> 74 </div> 75</body>
css/style.cs
1cssは回答者様が答えやすいようにギガファイルに添付いたしました 2https://32.gigafile.nu/0203-ce50506e613809b5b87c8d669db14280d
bootstrap.css
1bootstrapも回答者様が答えやすいようにギガファイルに添付いたしました 2https://10.gigafile.nu/0203-d27f362d30c1bbccbfe349d84e715ed99 3 4※Bootstrap v5.0.0になります
おそらく、
div class="row row-65 justify-content-sm-center justify-content-lg-start offset-top-65 counters
のどこかだと思うのですが、全ていじってみても変わらなかったので、お助け頂けると幸いです。
よろしくお願い致します。
あなたの回答
tips
プレビュー