h4 and p should not have the flex-child property when flex-direction is set to row by default. You can wrap them together to maintain normal behavior:
For example:
.navbar-custom {
background: #2C3E50;
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
border: none;
}
/* Rest of the CSS code goes here */
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-graduation-cap"></i></div>
<div class="info">
<h3 class="title">Education</h3>
<div style="display:flex;">
<img src="image-url-here.png" alt="image-alt-text" id="edu-img">
<div style="margin:auto;">
<h4>School Name</h4>
<p id="left">Description Here</p>
</div>
</div>;
/* More HTML markup goes here */
<div id="about-items">
<img src="image-url-here.png" alt="image-alt-text" id="edu-img">
<h4>Another School Name</h4>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6">
<div class="box">
<div class="icon">
<div class="image"><i class="fa fa-check"></i></div>
<div class="info">
<h3 class="title">Other Things I've done</h3>
<p>
Sample text goes here.
</p>;
</div>
</div>
</div>
</div>
</div>
</div>
flex-direction:column can be used with a fixed height for wrapping. For regular block behavior, it's recommended to wrap h4 and p together.