Issues with responsive image formatter

Problem/Motivation

Testing the responsive image background formatter module, i found a couple of issues (in the viewElements() method of the formatter plugin):

1. The current code throws a notices as $index isn't defined upon first iteration
2. $attr['media'] may be undefined when using a breakpoint that isn't using any media query (for example with the mobile first approach you'll use a breakpoint without media query first)
3. The way the sources are ordered after retrieval using template_preprocess_responsive_image(), the order of sources is largest to most narrow breakpoints. This somehow doesn't work when using the media attribute on a
   element. I was able to produce this issue with 3 breakpoints in Chrome Version 54.0.2840.90 (64-bit) as well as FF v. 49.0.2 . When reversing the order it works fine.

Proposed resolution

Fix the notices by providing default value for $index and checking for the 'media' index in $attr. The problem with the breakpoint order can be fixed by reversing the array order.