How do I place this text below, on mobile view (blogger website)?-CodePudding

so I am brand new to web development (and to anything that requires code) and I've encountered this issue when working on my blogger website. I imported the theme template and I'm currently trying to learn to work with it.

this is how it looks on desktop (this is fine)

And this is how it looks like on something like an IphoneX (I suppose I'd want the text to be placed below instead

I'm not exactly sure what part of the code I should copy in here so I'll just type in the url:

psycoachalpha.blogspot.com

If anyone can help me fix this, or if you need any more information to do so, let me know. Thanks!

CodePudding user response：

You can use a flexbox approach with flex-wrap: wrap, so the overflowing item gets on a new line

CodePudding user response：

if you are using bootstrap you can use the Grid system which will allow you to display the blog side by side on desktops and for the text to go below the image on mobile

<div className="row">
   <div className="col-sm-4 col-lg-4">
        <div className="skill-item">
            <img className="sticky" src="https://via.placeholder.com/400x790/444444.jpg" title="single-img-five" alt="single-img-five" />
        </div>
   </div>
   <div className="col-sm-8 col-lg-8">
       <div className="skill-item">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
        </div>
   </div>
 </div>