Unable to add responsive flexboxes in a row - html

Question

I'm trying to place 4 equal sized flex-boxes in a single row in large and medium screen
and in 2 rows (2 in each) for small screen and in a 4 rows(1 in each row) for xsmall screens.
Two of the flex boxes are embedded codepens and the other two image thumbnails.
As of now,all 4 flex boxes are not of equal sizes and appear in a column.
here is the JSFiddle.
.box {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
align-items: center;
}
.box div.A {
order: 1;
flex: 0 1 auto;
align-self: auto;
min-width: auto;
min-height: auto;
}
.box div.B {
order: 2;
flex: 0 1 auto;
align-self: auto;
min-width: auto;
min-height: auto;
}
.box div.C {
order: 3;
flex: 0 1 auto;
align-self: auto;
min-width: auto;
min-height: auto;
}
.box div.D {
order: 4;
flex: 0 1 auto;
align-self: auto;
min-width: auto;
min-height: auto;
}
<script src="https://assets.codepen.io/assets/embed/ei.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="box">
<div class="A">
<div class="thumbnail">
<p data-height="268" data-theme-id="0" data-slug-hash="VaKMBJ" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen Simple Javascript App by Rashid Naushad (#rashidnaushad) on CodePen.</p>
</div>
</div>
<div class="B">
<div class="thumbnail">
<p data-height="268" data-theme-id="0" data-slug-hash="pyPjae" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen Tribute to Raghuram Rajan by Rashid Naushad (#rashidnaushad) on CodePen.</p>
</div>
</div>
<div class="C">
<div class="thumbnail">
<img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" />
<div class="caption">
<h5 class="text-center">Coming Soon!</h5>
</div>
</div>
</div>
<div class="D">
<div class="thumbnail">
<img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" />
<div class="caption">
<h5 class="text-center">Coming Soon!</h5>
</div>
</div>
</div>
</div>

Answer 1

I would do a very simple responsive column layout with media queries. No change to your HTML.
JSFiddle
CSS:
.box {
display: block;
width: 100%;
text-align: center;
margin: 0 auto;
}
.thumbnail {
height: 278px;
}
.box div.A, .box div.B, .box div.C, .box div.D {
float: left;
}
#media (max-width: 519px) {
.box div.A, .box div.B, .box div.C, .box div.D {
width: 100%;
}
}
#media (min-width: 520px) {
.box div.A, .box div.B, .box div.C, .box div.D {
width: 50%;
}
}
#media (min-width: 820px) {
.box div.A, .box div.B, .box div.C, .box div.D {
width: 25%;
}
}