Problem with modal window AdminLTE

This is my HTML where at the end is the modal window, the problem is that when I put it in mobile device mode it does not show me anything of the modal window, I will attach 2 screenshots 1 where it is in desktop mode and the other mobile mode

HTML:

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
        Eventos
        <small>Listado</small>
        </h1>
    </section>
    <!-- Main content -->
    <section class="content">
        <!-- Default box -->
        <div class="box box-solid">
            <div class="box-body">
                <div class="row">
                    <div class="col-md-12">
                        <a href="<?php echo base_url();?>mantenimiento/eventos/add" class="btn btn-primary btn-flat"><span class="fa fa-plus"></span> Agregar Evento</a>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-md-12">
                        <table id="eventos" class="table table-bordered table-hover nowrap" style="width:100%">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Salon</th>
                                    <th>Instructor</th>
                                    <th>Curso</th>
                                    <th>Hora de Inicio</th> 
                                    <th>Hora de Fin</th> 
                                    <th>Fecha</th> 
                                    <th>Estado del Evento</th>
                                    <th>Opciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php if(!empty($eventos)):?>
                                    <?php foreach($eventos as $evento):?>
                                        <tr>
                                            <td><?php echo $evento->id;?></td>
                                            <td><?php echo $evento->salones;?></td>
                                            <td><?php echo $evento->instructores;?></td>
                                            <td><?php echo $evento->cursos;?></td>
                                            <td><?php echo $evento->hora_inicio;?></td>
                                            <td><?php echo $evento->hora_fin;?></td>
                                            <td><?php echo $evento->fecha;?></td>
                                            <td><?php if ($evento->estado == "1") {
                                                    echo '<span class="label label-success">Iniciado</span>';
                                                }else{
                                                    echo '<span class="label label-danger">Finalizado</span>';
                                                } ?></td>
                                            <?php $dataeventos = $evento->id."*".$evento->salones."*".$evento->instructores."*".$evento->cursos."*".$evento->hora_inicio."*".$evento->hora_fin."*".$evento->fecha."*".$evento->estado;?>
                                            <td>
                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-info btn-view-eventos" data-toggle="modal" data-target="#modal-default" value="<?php echo $dataeventos?>">
                                                        <span class="fa fa-search"></span>
                                                    </button>
                                                    <a href="<?php echo base_url();?>mantenimiento/eventos/delete/<?php echo $evento->id;?>" class="btn btn-danger btn-remove"><span class="fa fa-remove"></span></a>
                                                </div>
                                            </td>
                                        </tr>
                                    <?php endforeach;?>
                                <?php endif;?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->

<div class="modal fade" id="modal-default">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Informacion del Evento</h4>
      </div>
      <div class="modal-body">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary btn-print"><span class="fa fa-print"> </span>Imprimir</button>
      </div>

    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

Full Mode with the Active Modal Window:

Modal Sale when it is in responsive does not show the data:

The data I send to call from a jQuery that I have the footer.php

is the following:

$(".btn-view-eventos").on("click", function(){
    var eventos = $(this).val(); 
    var infoeventos = eventos.split("*");
    html = "<p><strong>Salon: </strong>"+infoeventos[1]+"</p>"
    html += "<p><strong>Instructor: </strong>"+infoeventos[2]+"</p>"
    html += "<p><strong>Curso: </strong>"+infoeventos[3]+"</p>"
    html += "<p><strong>Hora de Inicio: </strong>"+infoeventos[4]+"</p>"
    html += "<p><strong>Hora de Fin: </strong>"+infoeventos[5]+"</p>"
    html += "<p><strong>Fecha: </strong>"+infoeventos[6]+"</p>"
    html += "<p><strong>Estado del Evento: </strong>"+infoeventos[7]+"</p>"
    $("#modal-default .modal-body").html(html);
});