What is the best way to create a basic responsive row that contains an avatar and two lines of text?

I'm working on a responsive web project that uses the common pattern of a row that contains an image (like an avatar) and text to the right of it. Just like the rows that list avatar + question(+details) in the forum here :)

I'm using a third-party framework that uses %s to determine column widths. I have placed the image in the 1st column, and then set the text to the max column width that's left over.

However, when I shrink the browser's width, then I end up with one of two unfavorable results: 1) the image shrinks really quickly into a tiny dot, or 2) the image stays the same size but then drops to the next row because it no longer fits in the tiny column width

I've started using jQuery to change column classes (changing image from col-1 to col-3 and shrinking text from col-11 to col-8). The elements are now all misaligned, and I also feel like there must be a more efficient way than jQuery here.

What is the best practice for this very common pattern? Creating a responsive row in which the images stay the same size (and are also vertically aligned to the center!).