The best way would be to use Bootstrap's grid system. It's based on 12 columns so you can split it any way as long as it all adds up to 12.
Each row should be wrapped in a div with a class of "row" and then use column divs inside. For this page I'm using a 4 column width div (col-md-4) for the images and 8 column width div (col-md-8) for the text.
Columns will be use the following classes .col-sm-*, .col-md-*, .col-lg-*, .col-xl-*. That just specifies at what browser width the div should break and go full width. The columns are "mobile first" so any columns set up as "sm" will stay that width all the way up. Columns that are "md" will keep their width up through lg and xl but break and go full width at sm, etc. Most of the time I'll use "md" because I would only need it to go full width on mobile sized devices but retain the column widths for anything larger.
You can also use a combination of the column width classes. So let's say I want a 4 column width (33%) div on a mdall device but 3 column width (25%) on a medium device I would use .col-md-4 and .col-lg-3.
So "
So "
<div class="col-md-4 col-md-3">...</div> ".sm - devices less than 768px wide.
md - Small devices (tablets, 768px and up)
lg - Medium devices (desktops, 992px and up)
xl - Large devices (large desktops, 1200px and up)
Bootstrap has all the details and examples on their documentation. https://getbootstrap.com/docs/5.0/layout/columns/
