Bootstrap change image according to device

Question

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

Answer 1

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 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:

    
    
    

    
    
    
    fancy pants
    

    
    


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