Bootstrap: переупорядочить 3 столбца на маленьких экранах

У меня возникают проблемы при попытке изменить порядок столбцов с помощью начальной загрузки, HTML и CSS.

В настоящее время мой макет выглядит примерно так:

введите здесь описание изображения

B и C содержатся внутри одного столбца, а A имеет столбец для себя. На десктопе и планшетах все нормально, но мне нужно переупорядочить контент для маленьких устройств, чтобы получилось что-то вроде этого:

введите здесь описание изображения

Мой код в настоящее время выглядит следующим образом:

    <div class="container">
        <div class="row padding-m">
            <div class="col-md-6">
                <div class="card" style="padding: 0px 20px;">
                    BLOCK A
                    
                </div>
            </div>
            <div class="col-md-6">
                <div class="card" style="border: none;">
                    
                    BLOCK B
                    
                    BLOCK C
                    
                </div>
            </div>
        </div>
    </div>

Итак, моя проблема заключается в том, что, с одной стороны, мне нужно разделить столбец 2 на две части, а с другой стороны, мне нужно, чтобы B переместился в верхнюю часть столбца, а C - в нижнюю. Есть ли способ сделать это?


html css twitter-bootstrap
person AlexGasconB    schedule 27.03.2017    source источник
comment
Нужно изучить использование классов col-push и col-pull в Bootstrap: getbootstrap.com/css/#grid -порядок столбцов   -  person Tim Lewis    schedule 27.03.2017
comment
Конечно, документации для col-push очень мало.   -  person WillardSolutions    schedule 27.03.2017
comment
@EatPeanutButter Да, это действительно так. Рекомендуется использовать песочницу, например Bootply, для экспериментов с макетами столбцов; и достаточно просто увидеть изменения в вытягивании и проталкивании, просто изменив размер экрана.   -  person Tim Lewis    schedule 27.03.2017
comment
@TimLewis @ EatPeanutButter Я пробовал использовать col-push и col-pull, и на маленьких экранах они работают так, как я хочу, но на больших экранах C перемещается после конца A, оставляя довольно большой пробел (более или менее похожий на это i.imgur.com/q0rg2Kh.png). Есть ли способ избежать этого?   -  person AlexGasconB    schedule 27.03.2017
comment
col-push и col-pull должны иметь доступные классы размеров (xs, sm, md, lg) (например, col-md-push-3), поэтому используйте эти классы push и pull только с установленными размерами xs или sm.   -  person Tim Lewis    schedule 27.03.2017

Ответы (2)


arrow_upward
3
arrow_downward

Предполагая, что «A» выше, чем на вашей картинке, просто используйте pull-right в других столбцах и col-xs-12, чтобы обеспечить полную ширину на мобильном устройстве...

Демо

<div class="row">
        <div class="col-xs-12 col-md-6 pull-right">
            <div>
                B
            </div>
        </div>
        <div class="col-xs-12 col-md-6">
            <div>
                A
            </div>
        </div>
        <div class="col-xs-12 col-md-6 pull-right">
            <div>
                C
            </div>
        </div>
    </div>

Демо

person Zim    schedule 27.03.2017

arrow_upward
0
arrow_downward

С bootstrap 4 pull-right больше не работает, а также не совместим с flex.

Решение, совместимое с flex, может быть основано на:

  • display: contents заставляет дочерние элементы элемента выглядеть так, как если бы они были прямыми дочерними элементами родительского элемента. , игнорируя сам элемент. Это может быть полезно, когда элемент-оболочку следует игнорировать при использовании сетки CSS или аналогичных методов компоновки.
  • order: -1 для изменения порядка элемента "B".

Полный код для решения на чистом HTML+CSS без каких-либо библиотек:

* {
  box-sizing: border-box;
}

.main-container {
  display: flex;
}

.item {
  width: 50%;
}

.photo-container {
  background: #AAF;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 1rem;
}

.photo {
  background: #55F;
  width: 140px;
  height: 220px;
  border: solid 1px #33F;
}

.product-details h1 {
  background: #FAA;
  margin: 0;
  padding: 1rem;
}

.product-description {
  background: #FFA;
  padding: 1rem;
}

@media (max-width: 600px) {
  .main-container {
    flex-direction: column;
  }

  .item {
    width: 100%;
  }
  
  .product-details {
    display: contents;
  }
  
  .product-details h1 {
    order: -1;
  }
}
<div class="main-container">
  <div class="item photo-container">
    <div class="photo"></div>
  </div>
  <div class="item product-details">
    <h1>Product name</h1>
    <div class="product-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

Решение на основе бутстрапа 4:

* {
  box-sizing: border-box;
}

.photo-container {
  background: #AAF;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.photo {
  background: #55F;
  width: 140px;
  height: 220px;
  border: solid 1px #33F;
}

.product-details h1 {
  background: #FAA;
}

.product-description {
  background: #FFA;
}

@media (max-width: 576px) {
  .product-details {
    display: contents;
  }
  .product-details h1 {
    order: -1;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row flex-column flex-sm-row">
    <div class="col-12 col-sm-6 photo-container">
      <div class="photo"></div>
    </div>
    <div class="col-12 col-sm-6 product-details">
      <h1>Product name</h1>
      <div class="product-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </div>
</div>

person kravemir    schedule 25.02.2020