CSS and HTML methods for moving paragraphs to the left on mobile sized screens

Question

Looks perfect on a normal 16:9 computer screen, with text on the left and images on the right. However, when it comes to smaller screens (e.g. phone size screens), it does display the picture on top of the paragraph like I want it to. I'm very new to this so please help.

This is my media file

@media(max-width: 700px){
    
   
    .project1-img{
        flex-basis: 10%;
        width: 350px;
        margin: 20px;
    }
    
    .project-one{
        float: right;
        width: 750px;
        margin: 20px;
        padding-left: 10px;  
        inline-size: 1000px;
    }   
}

I need a code to help me align paragraphs to the desired position

Answer 1

What do you want to do?
I guess you want both the paragraph and the image to be visible on the phone screen. So you can do this using the CSS flex property
Here is an example:

    
    



    

        

            
Some Heading
            
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, id praesentium nesciunt vitae libero pariatur. Nam earum reiciendis error autem porro dicta officiis ullam. Alias, minima! Laborum natus maiores rem!
        
        

            
        
    
    

If this is not what you want to do, then please explain in detail what you want to do... and your entire code (html file)