Image gallery layout not displaying properly - html

Question

Currently what I'm trying to achieve is this, where the first and sixth card of the image gallery is horizontally elongated and cards 2 to 5 are horizontally elongated, but all these cards 1 to 6 should fit perfectly in 2 rows as shown in ref image.
I'm using col-md-6 for the first image and col-md-3 for image 2 and 3 but for some reason the layout is still not what I want. The second row images start from the end of my cards 2 and 3 and my images are really stretched.
CodeSandBox: https://codesandbox.io/s/immutable-rain-6yx99?file=/src/App.js
Code:
<div className="container">
<div className="row">
<div className="col-md-6 col-sm-6">
<img src="https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg"/>
</div>
<div className="col-md-3 col-sm-6">
<img style={{minHeight:"280px"}} src="https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_b.jpg"/>
</div>
<div className="col-md-3 col-sm-6">
<img style={{minHeight:"280px"}} src="https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_b.jpg"/>
</div>
<div className="col-md-3 col-sm-6">
<img style={{minHeight:"280px"}} src="https://i.pinimg.com/originals/cc/18/8c/cc188c604e58cffd36e1d183c7198d21.jpg"/>
</div>
<div className="col-md-3 col-sm-6">
<img style={{minHeight:"280px"}} src="https://images.unsplash.com/photo-1454372182658-c712e4c5a1db?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80"/>
</div>
<div className="col-md-6 col-sm-6">
<img src="https://wallpaperaccess.com/full/1376490.jpg"/>
</div>
</div>
</div>

Answer 1

Every row has only 12 Col then end of it row so ,
in your code above y should close row after every 12 col .