bugfix> html > 投稿

私のウェブサイトには次のセクションがあります。

<div class="container">
  <div class="row text-center mb-4 mt-2">
    <div class="col-md-12">
      <div class="w-100 col-md-12 pb-4 pt-1 bg-light">
        <div class="row align-items-center">
          <div class="col-md-4">
            <h4 class="font-weight-bold">Step 1:</h4>
            <h5 class="pl-5 pr-5">Search for people based on your keywords.</h5>
          </div>
          <div class="col-md-8 mb-5 mt-4">
            <div class="icon-box">
              <img src="static/images/step1.jpg" class="img-fluid                                    
                                                        mx-auto d-block border" />
            </div>
          </div>
          <div class="col-md-8 mt-5 mb-5">
            <div class="icon-box">
              <img src="static/images/step2.jpg" class="img-fluid                                    
                                                        mx-auto d-block border" />
            </div>
          </div>
          <div class="col-md-4">
            <h4 class="font-weight-bold">Step 2:</h4>
            <h5 class="pl-5 pr-5">The results are sorted by a person's responsiveness. Choose from a\
 list of matches who are ready and willing to interact.</h5>
          </div>
          <div class="col-md-4">
            <h4 class="font-weight-bold">Step 3:</h4>
            <h5 class="pl-5 pr-5">Message and make connections with people who are open for (real or\
 virtual) coffee!</h5>
          </div>
          <div class="col-md-8 mt-5">
            <div class="icon-box">
              <img src="static/images/step3.jpg" class="img-fluid                                    
                                                        mx-auto d-block border" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

これは次のようになります:

しかし、電話の画面では、テキスト(ステップ1など)と画像が積み重ねられています。しかし、レイアウトのために、私が望むようにtext-image-text-image-text-imageを交互にしません:

電話の画面で順序を変更し、デスクトップのレイアウトをそのままにしておくにはどうすればよいですか?

私のCSSもここにあります:

html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}
body {
  font-family: "PT Sans", sans-serif;
}
.container {
  max-width: 960px;
}
.lh-condensed {
  line-height: 1.25;
}
.main-header {
  max-width: 700px;
}
.ofc-main-title {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-size: 40px;
}
.ofc-title {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-size: 24px;
}
a.ofc-link-title {
  color: #000000;
  text-decoration: none;
}
a.ofc-link-title:hover {
  color: #000000;
}
a.ofc-link-title:active {
  color: #000000;
}
a.ofc-link-title:visited {
  color: #000000;
}
.ofc-main-subtitle {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-size: 24px;
}
.ofc-footer {
  font-family: "Economica", sans-serif;
  font-weight: 400;
  font-size: 16px;
  text-align: center;
}
form#main-search-form {
  align-items: center;
  justify-content: center;
}
span#main-beta-tag {
  color: #FF1493;
  font-size: 16px;
}
span#beta-tag {
  color: #FF1493;
  font-size: 12px;
}
#onboarding-title {
  font-size: 24px;
}
.onboarding-panel {
  background-color: #FBF7F0;
  border-radius: 15px;
}
.onboarding-img {
  width: 250px;
}
.onboarding-text {
  font-weight: 900;
}
.step-panel {
  background-color: #FFFFFF;
  border-radius: 15px;
}
.step-text {
  background-color: #FFFFFF;
  width: 49%;
  text-align: left;
  display: inline-block;
  padding: 30px;
  font-size: 20px;
}
.step-img {
  background-color: #FFFFFF;
  width: 49%;
  text-align: right;
  display: inline-block;
  padding: 20px;
}
span#looking-for {
  color: #1C99CE;
}
@media(max-width:767px) {
  .step-text {
    width: 100%;
  }
  .step-img {
    width: 100%;
  }
  .step-img {
    width: 100% !important;
    padding: 0px;
  }
  .step-img img {
    width: 100% !important;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 10px;
    padding-left: 10px;
  }
  .step-text {
    background: none;
  }
  .steps {
      box-shadow: 0px 0px 1px 1px #d9d6d6;
  }
  .onboarding-panel .steps:first-child .step-text {
    padding-bottom: 0px !important;
  }
  .step-img {
    background: none !important;
  }
  .ofc-main-title {
    font-size: 35px;
  }
  #search-form {
    margin-top: 15px;
  }
  .border-bottom {
    display: block !important;
    text-align: center !important;
  }
  #search-form .btn {
    margin-top: 10px !important;
    padding-left: 20px;
    padding-right: 20px
  }
}
.icon-box {
    margin: 0px 20px;
}
.icon-box p {
    font-size: 18px;
}

回答 2 件
  • 私はあなたのメディアクエリに追加しました @media (max-width: 767px) {} インクルード order のプロパティ flex-box ある方法で、望ましい出力が達成されます。

    html {
      font-size: 14px;
    }
    @media (min-width: 768px) {
      html {
        font-size: 16px;
      }
    }
    body {
      font-family: "PT Sans", sans-serif;
    }
    .container {
      max-width: 960px;
    }
    .lh-condensed {
      line-height: 1.25;
    }
    .main-header {
      max-width: 700px;
    }
    .ofc-main-title {
      font-family: "Lato", sans-serif;
      font-weight: 900;
      font-size: 40px;
    }
    .ofc-title {
      font-family: "Lato", sans-serif;
      font-weight: 900;
      font-size: 24px;
    }
    a.ofc-link-title {
      color: #000000;
      text-decoration: none;
    }
    a.ofc-link-title:hover {
      color: #000000;
    }
    a.ofc-link-title:active {
      color: #000000;
    }
    a.ofc-link-title:visited {
      color: #000000;
    }
    .ofc-main-subtitle {
      font-family: "PT Sans", sans-serif;
      font-weight: 400;
      font-size: 24px;
    }
    .ofc-footer {
      font-family: "Economica", sans-serif;
      font-weight: 400;
      font-size: 16px;
      text-align: center;
    }
    form#main-search-form {
      align-items: center;
      justify-content: center;
    }
    span#main-beta-tag {
      color: #ff1493;
      font-size: 16px;
    }
    span#beta-tag {
      color: #ff1493;
      font-size: 12px;
    }
    #onboarding-title {
      font-size: 24px;
    }
    .onboarding-panel {
      background-color: #fbf7f0;
      border-radius: 15px;
    }
    .onboarding-img {
      width: 250px;
    }
    .onboarding-text {
      font-weight: 900;
    }
    .step-panel {
      background-color: #ffffff;
      border-radius: 15px;
    }
    .step-text {
      background-color: #ffffff;
      width: 49%;
      text-align: left;
      display: inline-block;
      padding: 30px;
      font-size: 20px;
    }
    .step-img {
      background-color: #ffffff;
      width: 49%;
      text-align: right;
      display: inline-block;
      padding: 20px;
    }
    span#looking-for {
      color: #1c99ce;
    }
    @media (max-width: 767px) {
      .one {
        order: 1;
      }
      .two {
        order: 2;
      }
      .three {
        order: 4;
      }
      .four {
        order: 3;
      }
      .five {
        order: 5;
      }
      .six {
        order: 6;
      }
      .step-text {
        width: 100%;
      }
      .step-img {
        width: 100%;
      }
      .step-img {
        width: 100% !important;
        padding: 0px;
      }
      .step-img img {
        width: 100% !important;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-right: 10px;
        padding-left: 10px;
      }
      .step-text {
        background: none;
      }
      .steps {
        box-shadow: 0px 0px 1px 1px #d9d6d6;
      }
      .onboarding-panel .steps:first-child .step-text {
        padding-bottom: 0px !important;
      }
      .step-img {
        background: none !important;
      }
      .ofc-main-title {
        font-size: 35px;
      }
      #search-form {
        margin-top: 15px;
      }
      .border-bottom {
        display: block !important;
        text-align: center !important;
      }
      #search-form .btn {
        margin-top: 10px !important;
        padding-left: 20px;
        padding-right: 20px;
      }
    }
    .icon-box {
      margin: 0px 20px;
    }
    .icon-box p {
      font-size: 18px;
    }
    
    
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>JS Bin</title>
        <link
          rel="stylesheet"
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
          crossorigin="anonymous"
        />
        <link rel="stylesheet" href="./style.css" />
      </head>
      <body>
        <div class="container">
          <div class="row text-center mb-4 mt-2">
            <div class="col-md-12">
              <div class="w-100 col-md-12 pb-4 pt-1 bg-light">
                <div class="row align-items-center">
                  <div class="col-md-4 one">
                    <h4 class="font-weight-bold">Step 1:</h4>
                    <h5 class="pl-5 pr-5">
                      Search for people based on your keywords.
                    </h5>
                  </div>
                  <div class="col-md-8 mb-5 mt-4 two">
                    <div class="icon-box">
                      <img
                        src="static/images/step1.jpg"
                        class="img-fluid mx-auto d-block border"
                        alt="image-1"
                      />
                    </div>
                  </div>
                  <div class="col-md-8 mt-5 mb-5 three">
                    <div class="icon-box">
                      <img
                        src="static/images/step2.jpg"
                        class="img-fluid mx-auto d-block border"
                        alt="image-2"
                      />
                    </div>
                  </div>
                  <div class="col-md-4 four">
                    <h4 class="font-weight-bold">Step 2:</h4>
                    <h5 class="pl-5 pr-5">
                      The results are sorted by a person's responsiveness. Choose
                      from a\ list of matches who are ready and willing to interact.
                    </h5>
                  </div>
                  <div class="col-md-4 five">
                    <h4 class="font-weight-bold">Step 3:</h4>
                    <h5 class="pl-5 pr-5">
                      Message and make connections with people who are open for
                      (real or\ virtual) coffee!
                    </h5>
                  </div>
                  <div class="col-md-8 mt-5 six">
                    <div class="icon-box">
                      <img
                        src="static/images/step3.jpg"
                        class="img-fluid mx-auto d-block border"
                        alt="image-3"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script
          src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
          integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
          crossorigin="anonymous"
        ></script>
        <script
          src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
          integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
          crossorigin="anonymous"
        ></script>
        <script
          src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
          integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
          crossorigin="anonymous"
        ></script>
        <script src="./script.js"></script>
      </body>
    </html>
    
    

    それがの美しさです order フレックスボックスのプロパティ。これらのシナリオでは非常に役立ちます。

  • 私があなたの質問を正しく理解していない場合、あなたはテキスト画像、テキスト画像、テキスト画像を上から下にモバイル画面で表示したいですか?

    まず、各行に次のようなコンテナを追加します

       <div class="row text-center mb-4 mt-2">
            <div class="col-md-12">
                <div class="w-100 col-md-12 pb-4 pt-1 bg-light">
                    <div class="row align-items-center">
                        <div class="row">
                            <div class="col-md-4">
                                <h4 class="font-weight-bold">Step 1:</h4>
                                <h5 class="pl-5 pr-5">Search for people based on your keywords.</h5>
                            </div>
                            <div class="col-md-8 mb-5 mt-4">
                                <div class="icon-box">
                                    <img src="image1" class="img-fluid                                    
                                                            mx-auto d-block border" />
                </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-8 mt-5 mb-5">
                                    <div class="icon-box">
                                        <img src="image2" class="img-fluid                                    
                                                            mx-auto d-block border" />
                </div>
                                    </div>
                                    <div class="col-md-4">
                                        <h4 class="font-weight-bold">Step 2:</h4>
                                        <h5 class="pl-5 pr-5">The results are sorted by a person's responsiveness. Choose
                                            from
                                            a\
                                            list of matches who are ready and willing to interact.</h5>
                                    </div>
    
                                </div>
                                <div class="row">
                                    <div class="col-md-4">
                                        <h4 class="font-weight-bold">Step 3:</h4>
                                        <h5 class="pl-5 pr-5">Message and make connections with people who are open for
                                            (real
                                            or\
                                            virtual) coffee!</h5>
                                    </div>
                                    <div class="col-md-8 mt-5">
                                        <div class="icon-box">
                                            <img src="image3" class="img-fluid                                    
                                                            mx-auto d-block border" />
                </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
    
    

    次に、モバイルモードになったら、このプロパティを使用して2番目のコンテナにクラスを追加します

    .yourClass {
    display: flex;
    flex-direction: column-reverse;
    }
    
    

あなたの答え