Arranging DIV ordering on from Desktop to Smartphone

Question

I hope you are well, I am trying to make my desktop site responsive. At the moment I have the following layout on desktop.

IMAGE_1_DIV TEXT_1_DIV

TEXT_2_DIV IMAGE_2_DIV

IMAGE_3_DIV TEXT_3_DIV

So the text DIV goes from Right, Left and Right.

They are square boxes which both take up 6 columns out of 12.

So for SMALL mobile screens, I want the boxes to take up the full width so 12 columns which is working okay. But now the ordering of the boxes is.

*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*

Please can someone advise how I get my TEXT_2_DIV to appear below 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

If you use flexbox you could easily reorder your divs on mobile but it is going to be a mess while also using bootstraps classes. If I could see what you your page looks like I could rebuild it using flexbox.

The easier solution would be to create a second duplicate TEXT_2_DIV and place it after IMAGE_2_DIV, have it display:none on desktop and then display: block on mobile. On mobile make the first TEXT_2_DIV display :none.

Does that make sense?

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