Hilly look at the HTML of the DIVs in this example. The first DIV, right after the body tag, is the wrapper for two column DIVs within. The left column contains the text and more DIVs, to switch the text alignment between left-justified and centered. The right column DIV contains ... actually nothing: I set a background image with CSS for the photo.
There is some CSS in the head section of this page. You don't need to understand it all, just know that it is the part that makes the layout switch from columns in a row to stacked, once the screen width becomes less than 400 pixels across. I learned something new about layout in order to create this example. The keywords are "flex box" and "media queries."
I'll leave it as an exercise for you to figure out how to cut'n'paste the parts you need from this example to your own working web page. Hint: you need only the DIVS plus the CSS within, and including, the STYLE tags.
Some closing notes, like contact info, can go here.