Quiero que los divs estén de acuerdo al diseño de las imágenes, en cualquier dispositivo, no he logrado que desde una pantalla pequeña, el div "info-card" se posicione debajo de la foto.
y adicional que todo esté alineado en el centro, dependiendo del dispositivo, hasta el momento se muestra la estructura pero faltan esos detalles que no he logrado resolver. No se si sea necesario colocar la tabla dentro del div, o si lo pueda hacer de otra manera. Gracias.
.profile-card{
width:100%;
margin: 0 auto;
color:white;
text-align:center;
}
.title-card{
text-transform:uppercase;
background:#1f212b;
padding:5px 0px;
}
.image-card{
width:45%;
float:left;
background:#CC6600;
display:inline-block;
}
.info-card{
width:45%;
float:left;
background:#000FFF;
display:inline-block;
}
<div class="profile-card">
<div class="title-card">
<h2 class="name-card">name <span clas="lastname-card">lastname</span></h2>
</div>
<div class="image-card">
<img class="image-profile"src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample10.jpg" alt="sample10" />
</div>
<div class="info-card">
<table class="" border="0">
<tr>
<td>Building:</td>
<td>IP-304</td>
</tr>
<tr>
<td>Telephone number</td>
<td>4546456</td>
</tr>
<tr>
<td>Web site</td>
<td><a href="">href</a> </td>
</tr>
<tr>
<td>Email</td>
<td>asas@correo.cm</td>
</tr>
<tr>
<td>Opening hours</td>
<td>Previous appointment</td>
</tr>
</table>
</div>
<div class="research-card">
<h2 class="title-card">Academic degrees</h2>
<ul class="list-card">
<li>lista</li>
<li>lista</li>
<li>list</li>
<h2 class="title-card">Research area</h2>
<li>lista</li>
<h2 class="title-card">Other research interests</h2>
<li>lista</li>
<h2 class="title-card">Current teaching assignment</h2>
<li>lista</li>
</ul>
</div>
</div>