.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">
    <img src="~/Images/test-modern.jpg" class="pull-right img-responsive">
    <img src="~/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

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

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

Bootply example