電話画面でウェブサイトのアイテムの順序を変更する方法

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;
}

html

css

回答 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;
}

あなたの答え

関連記事