Организация DIV-заказа с рабочего стола на смартфон

Question

Надеюсь, у вас все хорошо, я пытаюсь сделать мой настольный сайт отзывчивым.На данный момент у меня есть следующий макет на рабочем столе.

IMAGE_1_DIV TEXT_1_DIV

TEXT_2_DIV IMAGE_2_DIV

IMAGE_3_DIV TEXT_3_DIV

Таким образом, текст DIV идет справа, слева и справа.

Это квадратные блоки, которые занимают 6 столбцов из 12.

Поэтому для МАЛЫХ мобильных экранов я хочу, чтобы блоки занимали всю ширину, чтобы 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, отобразив его: none на рабочем столе, а затем отобразив: block на мобильном телефоне.На мобильном телефоне сделайте первый показ 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;
}