安排从桌面到智能手机的 DIV 订购

Question

希望您一切都好，我正在努力使我的桌面网站具有响应性。目前我在桌面上有以下布局。

IMAGE_1_DIV TEXT_1_DIV

TEXT_2_DIV IMAGE_2_DIV

IMAGE_3_DIV TEXT_3_DIV

所以文本 DIV 从右、左和右移动。

它们都是方盒子，都占据了 12 列中的 6 列。

因此，对于小型移动屏幕，我希望这些框占据整个宽度，因此 12 列可以正常工作。但现在盒子的顺序是。

*IMAGE_1_DIV*    
*TEXT_1_DIV*
*TEXT_2_DIV*      <<<<< This is now showing beneath the first text box
*IMAGE_2_DIV*
*IMAGE_3_DIV*   
*TEXT_3_DIV*

请有人告诉我如何让我的 TEXT_2_DIV 出现在 IMAGE_2_DIV 下方？

<section id="passions-section">

     <div class="container xs-col-12 col-6">
      <h1 class="display-5 text-center">Passions</h1>
        <div class="row">
          <div class="xs-col-12 col-6 passions square-1">
           <img src="./img/guitar.jpg" class="img-fluid rounded">
          </div>
          <div class="xs-col-12 md-col-6 passions square-1-text text-center">
          <div class="vertical-align">
          <p>Music and art are a core part of my personality</p>
          </div>
          </div>
        </div>
         <div class="row">
          <div class="xs-col-12 md-col-6 passions square-2-text text-center">
           <div class="vertical-align">
           <p>Music and art are a core part of my personality</p>
          </div>
          </div>
          <div class="xs-col-12 md-col-6 passions square-2">
            <img src="./img/camera.jpg" class="img-fluid rounded">
          </div>
        </div>
         <div class="row">
          <div class="xs-col-12 md-col-6 passions square-3">
            <img src="./img/paint.jpg" class="img-fluid rounded">
          </div>
          <div class="xs-col-12 md-col-6 passions square-3-text text-center">
          <div class="vertical-align">
           <p>Music and art are a core part of my personality</p>
          </div>
          </div>
        </div>
      </div>
  </section>  

#passions-section{
    padding: 2rem 0 2rem 0;
}
#passions-section h1{
    padding-bottom: 1rem;
}
#passions-section .container{
    margin-bottom: 2rem;
}
.passions{
    background-color: #ffffff;
    box-shadow: 0px 0px 40px -10px rgba(59,66,71,1);
}
.vertical-align{
    display: inline-block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.passions p{
    font-size: 1.2rem;
    padding: 0 1rem 0 1rem;
}
.passions img{
    height: auto;
    width: 100%;
    opacity: 0.8;
}

Answer 1

如果您使用 flexbox，您可以轻松地在移动设备上重新排列您的 div，但同时使用引导程序类也会变得一团糟。如果我能看到你的页面是什么样子，我可以使用 flexbox 重建它。

更简单的解决方案是创建第二个重复的 TEXT_2_DIV 并将其放在 IMAGE_2_DIV 之后，在桌面上显示：无，然后在移动设备上显示：阻止。在移动设备上使第一个 TEXT_2_DIV 显示：无。

这有意义吗？

<section id="passions-section">
    <div class="container xs-col-12 col-6">
        <h1 class="display-5 text-center">Passions</h1>
        <div class="row">
            <div class="xs-col-12 col-6 passions square-1"><img class="img-fluid rounded" src="./img/guitar.jpg"></div>
            <div class="xs-col-12 md-col-6 passions square-1-text text-center">
                <div class="vertical-align">
                    <p>Music and art are a core part of my personality</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="xs-col-12 md-col-6 passions square-2-text text-center desktop">
                <div class="vertical-align">
                    <p>Music and art are a core part of my personality</p>
                </div>
            </div>
            <div class="xs-col-12 md-col-6 passions square-2"><img class="img-fluid rounded" src="./img/camera.jpg"></div>
            <div class="xs-col-12 md-col-6 passions square-2-text text-center mobile">
                <div class="vertical-align">
                    <p>Music and art are a core part of my personality</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="xs-col-12 md-col-6 passions square-3"><img class="img-fluid rounded" src="./img/paint.jpg"></div>
            <div class="xs-col-12 md-col-6 passions square-3-text text-center">
                <div class="vertical-align">
                    <p>Music and art are a core part of my personality</p>
                </div>
            </div>
        </div>
    </div>
</section>  
    .mobile {
        display: none;
    }
    @media only screen and (max-width: 640px) {
        .mobile {
            display: block;
        }
        .desktop {
            display: none;
        }
    }
    #passions-section {
        padding: 2rem 0 2rem 0;
    }
    #passions-section h1 {
        padding-bottom: 1rem;
    }
    #passions-section .container {
        margin-bottom: 2rem;
    }
    .passions {
        background-color: #ffffff;
        box-shadow: 0px 0px 40px -10px rgba(59, 66, 71, 1);
    }
.vertical-align{
    display: inline-block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.passions p{
    font-size: 1.2rem;
    padding: 0 1rem 0 1rem;
}
.passions img{
    height: auto;
    width: 100%;
    opacity: 0.8;
}