0

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

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

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

        </div>
    </div>

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

1 ответ 1

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>

1
  • Спасибо, сработало!
    – EgorG
    12 мар 2020 в 9:50

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.