I am trying to achieve following responsive layout using flexbox as show in below image..
I tried few thing but is not getting the desired result.
Each item in this design has a image and top of that I need to show blog title, date & category but I am not able to get the layout right
Currently I am doing same without flexbox but it's a lot of css and other tags, I thought I could change same with less code using flex.
I have looked at lot of example but I am not able to find 1 example similar to my layout
Current page is using bootstrap v3.3.6 which I can't change as it can impact other parts of the website
.flex-container { display: flex; background-color: #f1f1f1;}.flex-container > div { background-color: DodgerBlue; color: white; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;}.flex1 { flex: 100%; max-height:372px;}.flex2 { flex:25%; max-height:372px;}.flex3 { flex:25%; max-height:372px;}.flex4 { flex:25%; max-height:372px;}.flex5 { flex:25%; max-height:372px;}.flex-container > div > span { position:absolute; z-index:1;}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/><div class="container"><div class="row row-margin"><div class="flex-container"><div class="flex1"><img src="https://dummyimage.com/645x424/753075/fff.jpg&text=Image" class="img-responsive"><span>1</span></div><div class="flex2"><img src="https://dummyimage.com/480x360/3b063b/fff.jpg&text=Image" class="img-responsive"><span>2</span></div><div class="flex3"><img src="https://dummyimage.com/645x424/3b063b/fff.jpg&text=Image" class="img-responsive"><span>3</span></div><div class="flex4"><img src="https://dummyimage.com/480x360/3b063b/fff.jpg&text=Image" class="img-responsive"><span>4</span></div><div class="flex5"><img src="https://dummyimage.com/480x360/3b063b/fff.jpg&text=Image" class="img-responsive"><span>5</span></div></div></div></div>