Bootstrap change image according to device

I want to show different images in different devices (not background image). Is it possible to do using bootstrap 3.x like the following?

For large screen

<img src="large-image.jpg" />

for medium device

<img src="medium-image.jpg" />

for small device

<img src="small-image.jpg" />

and so on.

Thanks in advance.

N.B. Finally I have found a good solution by myself. See the accepted answer below.

After @EIChapo's comment on this 2 years back question, I have search and read a lot of articles for this solution. As all modern browser except IE supports <picture> tag when I'm posting this answer. There is a bulletproof solution based on Dave Newton's article.

What we need to do is as following:

<picture alt="fancy pants">
    <!-- loaded by browsers that support picture and that support one of the sources -->
    <source srcset="big.jpg 1x, big-2x.jpg 2x, big-3x.jpg" type="image/jpeg" media="(min-width: 40em)" />
    <source srcset="med.jpg 1x, med-2x.jpg 2x, big-3x.jpg" type="image/jpeg" />

    <!-- loaded by IE 8+, non-IE browsers that don’t support picture, and browsers that support picture but cannot find an appropriate source -->
    <![if gte IE 8]>
    <object data="fallback.jpg" type="image/jpeg"></object>
    <span class="fake-alt">fancy pants</span>
    <![endif]>

    <!-- loaded by IE 6 and 7 -->
    <!--[if lt IE 8]>
    <img src="fallback.jpg" alt="fancy pants" />
    <![endif]-->
</picture>

.fake-alt {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}