Losing my mind with srcset not working

So for life of me I cannot get what in my own opinion is extremely simple functionality to work.

I have a small set of images that when at 576px viewport width and above appear in a sidebar at 189 pixels wide, but when the browser width is smaller than 576px, I want a larger source of each respective image.

I'm using Bootstrap 4 if that makes any difference.

Visual - so when in normal desktop view or anything 576 pixels wide or wider, the images are in my right sidebar:

enter image description here

And in mobile width, 575 pixels or less:

enter image description here

What is the proper srcset attribute (for <img> tag) supposed to be set to to properly make this work?