从桌面到智能手机的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

如果您使用柔性盒，您可以很容易地重新排序您的div在移动，但它将是一个混乱，同时也使用引导类。如果我能看到你的页面，你的页面看起来就像我可以用柔性盒重建它。

更简单的解决方案是创建第二个复制的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;
}