Перенос колонки при изменение ширины экрана. Bootstrap

Question

Всем привет. Есть вот такая часть макета

<div class="row exp">
        <div class="col col-ex d-flex flex-column">

        </div>
        <div class="col col-cat">

        </div>
    </div>

На больших экранах это выглядит, как две колонки расположенные рядом по горизонтали. Пытаюсь сделать так, чтобы при использовании средних экранов первая колонка занимала уже всю ширину родителя, а вторая колонка перенеслась под первую и также заняла всю ширину. Подскажите пожалуйста, как можно это сделать?

Answer 1

Вместо класса col добавьте классы col-md-6 или col-lg-6 (в зависимости от того, при каком размере экрана Вы хотите получить изменения):

[class^="col"] {
  border: 1px solid red;
  padding: 50px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="row exp">
  <div class="col-md-6 col-ex d-flex flex-column">

  </div>
  <div class="col-md-6 col-cat">

  </div>
</div>

БЛОГ НА HUSL

Перенос колонки при изменение ширины экрана. Bootstrap

Ответы (1 шт):