Блог

Я пытаюсь создать макет в Bootstrap, который показывает три блока на большом экране и два блока на меньшем экране (точка останова находится между sm и md).

 <div class="row">
    <div class="container">
        <div class="col-xs-6 col-md-4">A - 50</div>
        <div class="col-xs-6 col-md-4">B - 100</div>
        <div class="col-xs-6 col-md-4">C - 75</div>
    </div>
</div>
  

Смотрите пример CodePen

Однако это приводит к нежелательному вертикальному разрыву между блоками A и C.

На мой взгляд, у меня есть несколько возможных вариантов устранения вертикального разрыва, но, возможно, есть лучшее решение:

• Дублируйте html и используйте visible-sm и visible-md, чтобы отобразить желаемый макет. На sm он имел бы макет из двух столбцов, причем первый столбец содержал бы как A, так и C.
  • Недостаток: содержимое блока также должно дублироваться, что может содержать много html
• Используйте JavaScript, чтобы переместить блок в правильный столбец (возможно, jQuery Masonry).
  • Недостаток: я бы предпочел решение только для CSS
• Взгляните на flexbox, столбцы css и css grid.
  • Недостаток: отсутствует поддержка браузера

Несовершенное непроверенное решение на http://codepen.io/elliz/pen/fvpLl . Ключевые моменты:

• При небольшой ширине
  • вырвать B из потока
  • сделать контейнер меньше

HTML

 <div class="container">
<!-- note: sm -> container 50% -->
  <div class="row col-xs-6 col-md-12"> 
    <!-- note: sm -> div = 100% of container which is 50% -->
    <div class="col-xs-12 col-md-4 h50">A - 50</div>
    <div class="col-xs-12 col-md-4 h100">B - 100</div>
    <div class="col-xs-12 col-md-4 h75">C - 75</div>
  </div>
</div>
  

Фрагмент CSS

 /* xs and sm */
@media ( max-width: 991px) { 
  .h100 {
    position: absolute !important; /* better to do with specificity, but quick ugly hack */
    margin-left:93%;
  }
}
  

Интервал не идеален, но дает вам отправную точку для ваших экспериментов.

Примечание: это может быть реализовано с помощью FlexBox и Grid (когда это будет готово) намного проще — и последняя альфа-версия Bootstrap поддерживает flexbox.

Я понимаю, вы сказали, что предпочли бы решение только на css, но, на мой взгляд, то, чего вы пытаетесь достичь, — это не то, что разработчики bootstrap имели в виду, когда они разрабатывали свою сеточную систему. Я бы использовал javascript, чтобы вставить эту присоску туда, где она вам нужна:

решение на jQuery / html / css

Я изменил ваши столбцы на контейнеры (я назвал их корзинами)

HTML

     <div class="row">
  <div class="container">
    <div id="leftBucket" class="col-xs-6 col-md-4">
      <div id="A" class="h50">A - 50</div>
    </div>
    <div id="middleBucket" class="col-xs-6 col-md-4">
      <div id="B" class="h100">B - 100</div>
    </div>
    <div id="rightBucket" class="hidden-sm col-md-4">
      <div id="C" class="h75">C - 75</div>
    </div>
  </div>
</div>

<div id="hiddenDiv"></div>
  

Затем я «позаимствовал» подход к просмотру медиа-запросов по ссылке в комментарии ниже

JS

 // stolen from: http://www.fourfront.us/blog/jquery-window-width-and-media-queries
$(window).resize(function(){    
    if ($("#hiddenDiv").css("float") == "none" ){
    // small screen!
    $('#C').appendTo('#leftBucket');
    } else {
    //not a small screen :P
    $('#C').appendTo('#rightBucket');
  }
});
  

И добавлены некоторые правила для скрытого div (которые я использую для просмотра ширины экрана)
CSS

 #hiddenDiv {float:left;}
@media only screen and (max-width: 992px){
    #hiddenDiv {float:none;}
}
  

ps. приятно видеть, как люди используют нарисованные от руки каракули, чтобы донести свои идеи, вот как мне нравится разбивать это и для людей: D

Я нашел умный способ сделать это. Измените порядок. Поместите C перед B, а затем используйте push и pull, чтобы поменять порядок

 <div class="row">
    <div class="container">
        <div class="col-xs-6 col-md-4">A - 50</div>
        <div class="col-xs-6 col-md-4 col-md-push-4 ">C - 75</div>
        <div class="col-xs-6 col- col-md-4 col-md-pull-4">B- 100</div>
    </div>
</div>
  

Я создал скрипку с добавлением оберточного div с фиксированной шириной. Для размера экрана 320 уменьшена ширина оболочки, а также изменен float в B div на float: right Fiddle здесь — http://jsfiddle.net/afelixj/2q785vp5/2 /