HTML/CSS div alignment - html

Question

When resized, I need the div order changed to move two logos next to each other at 50% width each and the third div (title) 100% width below. Can anyone please direct me with where I am going wrong.
.logo1 {
width: 50%;
float: left;
top: 0px;
}
.logo2 {
width: 50%;
float: right;
top: 0px;
}
.title {
width: 100%;
clear: both;
}
<header>
<div class="logo1">
<img src="Pictures/logo.png" width="189" height="61" border="0">
</div>
<div class="title">
<h1 class="map_title">Infrastructure Web Map</h1>
</div>
<div class="logo2">
<img src="Pictures/Picture1.png" width="310" height="70" border="0">
</div>
</header>

Answer 1

You can do it with the Flexbox:
body {margin: 0}
h1 {
text-align: center;
}
header {
display: flex; /* displays flex-items (children) inline */
flex-wrap: wrap; /* enables their wrapping */
}
header > div {
flex: 1; /* each takes 33.33% of the parent's width */
display: flex; /* addition */
justify-content: center; /* addition */
}
img {
display: block; /* removes bottom margin/whitespace */
width: 100%; /* responsiveness */
}
#media (max-width: 568px) {
header > div {
flex: 0 1 50%; /* flex-grow = default, flex-shrink = default, flex-basis = 50% (initial width) */
}
.title {
flex: 1; /* stretches to fill the parent's width (100%) */
order: 1; /* changes the order, i.e. puts it below/after the #logo2 (by default its "order: 0") */
}
}
<header>
<div class="logo1">
<img src="http://placehold.it/300x200" alt="logo1">
</div>
<div class="title">
<h1 class="map_title">Infrastructure Web Map</h1>
</div>
<div class="logo2">
<img src="http://placehold.it/300x200" alt="logo2">
</div>
</header>

Answer 2

Thanks to all for the help, after some further research and a combination of all the suggestions, this is what I used to get it working:
header {
background-color: #cccccc;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
img {
margin: auto;
display: block;
}
.logo1, .logo2 {
width: 50%;
flex: 1 1 0;
}
.title {
color: #336699;
flex: 100%;
order: 3;
text-align: center;
}
}