Создание отзывчивого div со сложными объектами

Question

Я создаю панель администратора с диаграммами/изображениями и т. Д.

Я не могу сделать это отзывчивым.

Все изображения являются svg, я использовал схему charts.js для создания круговой диаграммы.

Это пример DIV У меня есть

Это HTML:

<div class="row"> 
    <div class="col-md-6"> 
     <div class="alerts-chart-wrapper"> 
      <canvas id="alertsChart" style="float: left;"></canvas> 
     </div> 
    </div> 
    <div class="col-md-6"> 
     <div class="row alert-row"> 
      <div class="entitys-icons icon-1"> </div> 
      <div class="alert-entity-name"> Users </div> 
      <div class="entity-alerts-count">28</div> 
     </div> 
     ...(3 more rows) 
    </div> 
</div> 

CSS-код:

.alert-row { 
    padding: 0% 15% 3% 5%; 
} 

.entitys-icons { 
    background: url('/Areas/WebApp/app/main_page_assets/02_general_alerts_icons.svg'); 
    background-repeat: no-repeat; 
    width: 33px; 
    height: 33px; 
    background-size: 77px; 
    float: left; 
} 

.entitys-icons.icon-1 { 
    background-position: 0 2px; 
} 

.alert-entity-name { 
    float: left; 
    font-size: 0.75em; 
    vertical-align: middle; 
    line-height: 35px; 
    padding-left: 2px; 
} 

.entity-alerts-count { 
    float: right; 
    vertical-align: middle; 
    line-height: 35px; 
    padding-left: 2px; 
} 

.alerts-chart-wrapper { 
    width: 100%; 
} 

Теперь проблема заключается в круг растет и сжимается в зависимости от разрешения, но строки arent.

Вот скриншот проблемы, когда ширина уменьшается (круг и й строка должна быть выровнена):

Какова стратегия использования здесь? Я думал, что, возможно, я буду использовать медиа с фиксированным размером, но лучшим решением для меня является то, что высота строк изменится соответствующим образом.

Answer 1

Внутри головки тега, настроить правом видовой

<meta name="viewport" content="width=device-width,minimum-scale=1> 

Answer 2

Вы должны использовать другие параметры сетки, чтобы указать размеры как разрешение экрана изменяется.

http://getbootstrap.com/css/#grid

Для мобильного вы хотите использовать префикс .col-sm-.

<div class="row"> 
    <div class="col-md-6 col-sm-12"> 
     <div class="alerts-chart-wrapper"> 
      <canvas id="alertsChart" style="float: left;"></canvas> 
     </div> 
    </div> 
    <div class="col-md-6 col-sm-12"> 
     <div class="row"> 
      <div class="col-sm-6 alert-row"> 
       <div class="entitys-icons icon-1"> </div> 
       <div class="alert-entity-name"> Users </div> 
       <div class="entity-alerts-count">28</div> 
      </div> 
      ...(3 more **col**) 
     </div> 
    </div> 
</div>