How can I fix the mobile view on Bootstrap images to Left and Right with Text/Heading?

Hey everyone, hope everything is going well for everyone.

I been stumbling in a HTML/CSS/Bootstrap problem. I hope I am able to explain correctly :slight_smile:

I found a snippet and I have been trying almost all day to make it look correctly on the mobile version. Here is a .gif sample : https://imgur.com/a/S3Wl3sX

Here is the link of the snippet: https://bootsnipp.com/snippets/O54eO

I can’t get all the icons on top of each paragraph. For some newbie reason I keep getting the icons on top of each other. Any advice or feedback would be greatly appreciated.

Thank you.

You can change the order of the image when using flex so try adding this.

.how-img{order:-1;}

That code will of course need to go in the media query for the smaller screen.

e.g.

@media screen and (max-width:767px){
    .how-img{order:-1;}
}
1 Like

Hey @PaulOB, Thanks for the response.
I tried this out:

<section>
                <a name="home"></a>
            
                <div class="container">
            
                  <div class="row">
                    <div class="col-sm-12 col-md-6">
                      <div class="device-container">
            
                        
                       
            
                        <div class="arrow-down">
                        </div>
                      </div>
            
                    </div>
                   
                  </div>
  
                  <div class="row my-md">
                    <div class="col-sm-12 col-md-6 text-center">
                      <figure class="match-mask-width">
                        <img src="img/timetable.png" class="img-fluid rounded" width="250" height="250" />
                      </figure>
                    </div>
                    <div class="col-sm-12 col-md-6 align-self-center pr-md-0 pl-md-4 pl-lg-0">
                      <h2 class="h1">Elevate your most cherished group</h2>
                      <p>Maintaining a tight-knit bond with your chosen family is one of life's most important, challenging, and meaningful tasks. Cocoon is a bespoke solution for just that, filled with superpowers to actively bring your group closer together.</p>
                    </div>
                  </div>
            
                  <div class="row my-md">
                    <div class="col-sm-12 col-md-6 text-center order-md-1">
                      <figure class="match-mask-width">
                        <img src="img/dental.png" class="img-fluid rounded" width="250" height="250"/>
                      </figure>
                    </div>
                    <div class="col-sm-12 col-md-6 align-self-center pr-md-4 pr-lg-0">
                      <h2 class="h1">A living breathing space</h2>
                      <p>Just like your house, Cocoon is full of life. It’s dynamic, colorful, and even a little chaotic. Just as no two homes are alike, every Cocoon is unique as well. </p>
                    </div>
                  </div>
            
                  <div class="row my-md">
                    <div class="col-sm-12 col-md-6 text-center">
                      <figure class="match-mask-width">
                        <img src="img/timetable.png" class="img-fluid rounded" width="250" height="250" />
                      </figure>
                    </div>
                    <div class="col-sm-12 col-md-6 align-self-center pr-md-0 pl-md-4 pl-lg-0">
                      <h2 class="h1">Elevate your most cherished group</h2>
                      <p>Maintaining a tight-knit bond with your chosen family is one of life's most important, challenging, and meaningful tasks. Cocoon is a bespoke solution for just that, filled with superpowers to actively bring your group closer together.</p>
                    </div>
                  </div>
            
                </div>
              </section>

I sort of have it, I just need to fully tweak this and that.

Again, Thanks for the response.

The code I posted worked well with your live example so I if you are having problems then I’d need to see the updated code.

With Flexbox you have the facilty to reorder all flex items (direct children of a flex container). :slight_smile:

1 Like

Soory for the late respone @PaulOB
Flexbox is the right solution, Thanks for putting the time on replying

:slight_smile:

1 Like