スマホビューが上手くいかない

①PCビュー

②SPビュー

解決したいこと
・SPビュー時にテキストを画像やタイトルの下に下げたい。
「曜日、サーバーエンド、タイトル、画像」「画像以外の要素」を同じdivでまとめて、コードを書いたり、flexやfloatなどを使用し、色々試してみたんんですが、思う様にいかず手詰まりな状態です。
コードを書き始めたばかりで、引き出しや調べ方が乏しいのでこちらを使わせて頂きました。
何か良い方法はありませんでしょうか。

以下修正点
floatとclear:bothを使って、段を下げれる事が分かりました。
しかし、現在のコードに原因があるのか、「clear:both」が効きません。
何が原因で、下の段に落ちないのかわからず、質問させて頂きました。
打開策はありませんでしょうか。

過去に同じような質問をしておりますが、質問の質が悪く、削除申請中です。

html
1        <div class="container">
2          <div class="row">
3            <div class="col-md-8 col-12">
4              <div class="mod-article border-bottom clearfix">
5                <div class="list-article-left float-left">
6                  <div class="d-flex flex-column flex-wrap flex-md-row mb-2 mb-md-4">
7                    <time datetime="2022-3-8" itemprop="datepublished" class="mb-1 mb-md-0 mr-0 mr-md-5">2022.03.28</time>
8                    <ul class="ctg-term d-flex align-items-center flex-nowrap">
9                      <li class="tid-2">サーバーサイド</li>
10                      <li class="tid-26">モジュール</li>
11                    </ul>
12                  </div>
13                  <h3 class="line-clamp line-3 line-md-2 mb-0">
14                    これはタイトルです。This is title.これはタイトルです。This is title.これはタイトルです。This is title.これはタイトルです。This is title.これはタイトルです。This is title.これはタイトルです。This is title.
15                  </h3>
16                  <div class="clear-text clear:both">
17                    <p class="line-clamp line-2 line-md-3 cl-gray mb-2 mb-md-4">
18                      これは本文です。This is body text.これは本文です。This is body text.これは本文です。This is body text.これは本文です。This is body text.これは本文です。This is body text.これは本文です。This is body text.
19                    </p>
20                    <div class="author d-flex align-items-center flex-no-wrap" data-swiper-parallax="-1000">
21                      <img src="" loading="lazy" alt="Taro Tanaka" />Shin Kanemitsu
22                    </div>
23                  </div>
24                </div>
25                <div class="list-img float-right">
26                  <img src="" loading="lazy" alt="">
27                </div>
28              </div>
29            </div>
30          </div>
31        </div>

css
1.mod-article a{
2  padding: 10px 0;
3  border-bottom: 1px solid #707070;
4}
5.mod-article .img-wrap{
6  width: 34.5%;
7}
8.mod-article .img-wrap::before{
9  padding-top: 70%;
10}
11.mod-article time{
12  font-size: .75rem; /*12px*/
13}
14.mod-article h3{
15  font-size: .875rem; /*14px*/
16  font-weight: 500;
17  line-height: 1.3;
18}
19.mod-article p{
20  font-size: .75rem; /*12px*/
21  line-height: 1.45;
22}
23.ctg-term{
24  font-size: .625rem; /*10px*/
25}
26.ctg-term li:not(:last-child){
27  margin-right: 10px;
28}
29.ctg-term li.tid-2{color: #0392D9;}
30.ctg-term li.tid-26{color: #09B902;}
31.ctg-term li::before{
32  font-family: "Font Awesome 5 Free";
33  font-weight: 900;
34  content: "\f02b";
35  margin-right: 2px;
36}
37.author{
38  font-size: .75rem; /*12px*/
39  font-weight: 500;
40}
41.author img{
42  width: 25px;
43  height: 25px;
44  object-fit: contain;
45  margin-right: 5px;
46}
47
48@media (min-width: 768px) {
49  .mod-article a{
50    padding: 0;
51    border-bottom: none;
52  }
53  .mod-article .img-wrap{
54    width: 100%;
55  }
56  .mod-article h3{
57    font-size: 1.875rem; /*30px*/
58  }
59  .mod-article time{
60    font-size: 1.5625rem; /*25px*/
61  }
62  .mod-article p{
63    font-size: 1.5rem; /*24px*/
64  }
65  .ctg-term{
66    font-size: .75rem; /*12px*/
67  }
68  .author{
69    font-size: 1.125rem; /*18px*/
70  }
71  .author img{
72    width: 50px;
73    height: 50px;
74    margin-right: 20px;
75  }
76}
77@media (min-width: 992px) {
78  .ctg-term{
79    font-size: 1rem; /*16px*/
80  }
81  .author{
82    font-size: 1.25rem; /*20px*/
83  }
84}
85@media (min-width: 1200px) {
86  .ctg-term{
87    font-size: 1rem; /*18px*/
88  }
89  .author{
90    font-size: 1.5625rem; /*25px*/
91  }
92}
93
94.clear-text{
95    clear: both;
96}
97
98/*  list左よせ  */
99.list-article-left{
100  max-width: 60%;
101}
102@media (min-width: 768px) {
103  .list-img{
104    width: 60%;
105  }
106}
107
108.list-img{
109    width: 40%;
110}
111
112@media (min-width: 768px) {
113  .list-img{
114    width: 34.5% !important;
115  }
116}
117

Lhankor_Mhy

2022/05/20 06:50

「SPビュー時にテキストを画像やタイトルの下に下げたい」とのことですが、ここで言う「テキスト」とはコードで言うと「これは本文です。」のことでいいでしょうか？

Lhankor_Mhy

2022/05/20 06:54

また、ご提示のコードを試してみましたが、PCでの表示がスクリーンショット①のようなレイアウトになりませんでした。おそらく、ご提示の部分には原因はなさそうに思います。ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。問題再現の手順をもう少し詳しく書いていただけますか？