Ejemplo de como seria con las media queries
Con esto debería de ser responsivo nuevamente
/*Comienza los modals con las características GENERALES (class)*/
/*Este es en general donde se mete todo*/
.caracs{
width: 460px !important;
font-family: 'Poppins', sans-serif;
}
@media (min-width: 768px) { .caracs{
width: 500px !important;
font-family: 'Poppins', sans-serif;
} }
@media (min-width: 992px) { .caracs{
width: 810px !important;
font-family: 'Poppins', sans-serif;
} }
@media (min-width: 1200px) { .caracs{
width: 810px !important;
font-family: 'Poppins', sans-serif;
} }
/*div izquierdo*/
.nombre-datos{
display: inline-block; /*Necesario para que los divs estén en el mismo renglón*/
width: 250px !important;
font-size: 0.8em;
text-align: justify;
}
.valoracion{
height: 35px;
background-color: orange;
color: white;
padding-top: 8px;
padding-left: 10px;
font-size: 1.5em !important;
}
.filtros{
padding-top: 5px;
font-size: 1.2em;
}
/*div-derecho*/
.mas-datos{
vertical-align: top; /*Necesario para que el 2° div a la derecha comience desde arriba*/
display: inline-block;
}
.so{
display: inline-block;
width: 235px;
background-color: #f2f2f2;
}
.hardsoft-xtra{
display: inline-block;
width: 275px;
}
.nivel{
background-color: #dbdbdb;
}
/*Terminan los modals con las características GENERALES (class)*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal2">
Launch demo modal
</button>
<div class="modal fade" id="modal2" role="dialog">
<div class="modal-dialog modal-lm caracs">
<div class="modal-content">
<div class="modal-body">
<div class="nombre-datos">
<img src="media/buscadoresInternet/google.png" alt="Bing">
<p><b>Google</b> es sin duda el mejor buscador actualmente, ya que mantiene estrictos estándares
de calidad a lo largo de sus productos y permite una búsqueda sumamente personalizada.</p>
<p class="text-right"><a href="https://www.bing.com/?setlang=es" target="_blank">Usar ahora</a></p>
<div class="valoracion">
<p>Valoración: <b>10</b></p>
</div>
<div class="filtros">
<p>¿Requiere internet?: <b>Sí</b></p>
<p>¿Gratuito?: <b>Sí</b></p>
<p>Pagos integrados: <b>No</b></p>
</div>
</div>
<div class="mas-datos">
<div class="so text-center">
<p>Sistema operativo</p>
</div>
<div class="hardsoft-xtra text-center">
<p>Hardware/Software extra</p>
</div>
<div class="nivel text-center">
<p>Nivel educativo</p>
</div>
</div>
</div>
</div>
</div>
</div>