HTML/CSS div alignment

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;
    }
}