.img-responsive Breaks When Used With .pull-right

I've got some images that have .pull-left and .pull-right to align them in a specific pattern. I'm also using .img-responsive. The images look like this:

Option #1 : pictures stick the sides

<div class="row-pictures">
    <imgsrc="~/Images/test-modern.jpg"class="pull-right img-responsive"><imgsrc="~/Images/test-modern.jpg"class="pul-left img-responsive"></div>

.row-pictures.img-responsive {
  max-width: 50%
}

Bootply example

This will make pictures to stick both sides.

Option #2 : pictures stick each other

<divclass="row row-pictures"><imgsrc="~/Images/test-modern.jpg"class="col-xs-6 img-responsive" /><imgsrc="~/Images/test-modern.jpg"class="col-xs-6 img-responsive" /></div>

.row-picturesimg {
    padding: 0; /* optional: only to remove the gutter */
}

Bootply example