0

Bootstrap col img

Добрый день, подскажите пожалуйста как в бутстрапе 4 сделать подобное? проблема заключается в колонках 2 и 3, ума не приложу как сделать в десктопной версии их горизонтальными а в мобильной вертикальными...

1 ответ 1

0

Можно сделать так, с дублированием блока.

.row>div {
  border: solid 1px #ddd;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="container py-5">
  <div class="row">
    <div class="col-4 col-md-3">1</div>
    <div class="col-8 col-md-6">
      <div class="row">
        <div class="col-12">2</div>
        <div class="col-12 d-none d-md-block">3</div>
      </div>
    </div>
    <div class="col-12 col-md-3">4</div>
    <div class="col-12 d-block d-md-none">3</div>
  </div>
</div>

Либо с отрицательным margin:

.row>div {
  border: solid 1px #ddd;
  height: 50px;
}

div.a,
div.d {
  height: 100px;
}

div.c {
  margin-top: -50px; /** половину высоты от блока 1 */
}

@media screen and (max-width: 768px) {
  div.c {
    margin-top: 0;
  }
  div.b {
    height: 100px;
  }
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="a col-4 col-md-3">1</div>
    <div class="b col-8 col-md-6">2</div>
    <div class="c col-12 order-1 col-md-6 offset-md-3">3</div>
    <div class="d col-12 col-md-3">4</div>
  </div>
</div>

3
  • а без дублирования не обойтись ?( 30 мар 2021 в 9:42
  • @ДенисЛинник, разве что отрицательным margin либо с использованием masonry
    – entithat
    30 мар 2021 в 9:45
  • @ДенисЛинник, обновил ответ.
    – entithat
    30 мар 2021 в 10:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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