JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<div class="largeImage">  
  <img src="http://lorempixel.com/745/292/sports/" alt="large">
</div>

<div class="smallImages">
  <img src="http://lorempixel.com/214/145/sports/" alt="large">
  <img src="http://lorempixel.com/214/145/sports/" alt="large">
</div>

CSS

.largeImage{
  max-width:740px;
  height:auto;
  width:100%;
  display:inline-block;
  clear:both;
}

.largeImage img{
  width:100%;
}

.smallImages{
  background-color:lightgray;
  display:inline-block;
  max-width:210px;
}
.smallImages img{
  width:100%;
  height:auto;
}
.container{
  background-color:whitesmoke ;
  max-width:960px;
  width:auto;
  margin:0 auto;
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

  body{
    background-color:green;
  }
  
  .smallImages{
    width:100%;

  }
  
  .smallImages img{
    display:inline-block;
    float:left; 
    clear:both;
  }
  .largeImage{
   min-width:100% !important; 
  }
}