Из трех колонок в две в Bootstrap при media screen

260

10 декабря 2016, 10:34

Привет! Кто-нибудь подскажет как мне три столбика преобразовать в два при изменении разрешения экрана. Используется Bootstrap. При достижении экрана в 1200px все столбики сразу переходят в одну колонку. То есть нужно по идее изменить в HTML col-md-4 в col-md-6, но как ?)

Answer 1

В бустрапе при достижении ширины 1200px используются классы col-lg-
Bootstrap grid-options

Скрыть третью колонку можно добавив класс hidden-lg. Больше информации о классах скрытия колонок responsive-utilities-classes.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
<div class="container"> 
  <div class="row"> 
    <div class="col-md-4 col-lg-6">1</div> 
    <div class="col-md-4 col-lg-6">2</div> 
    <div class="col-md-4 hidden-lg">3</div> 
  </div> 
</div>