2 или 3 ответных столбца bootstrap

Question

Я хочу иметь переменное число столбцов, используя строку span, чтобы быть конкретными 3 столбца на xs, 2 столбца на sm (первые 2 столбца один над другим) и 3 столбца на lg. Я не знаю, как реализовать гибкий ряд строк для экрана sm.

Вот визуальное представление:

Вот мой код до сих пор:

<div class="container text-center"> 
    <div class="row"> 

     <div class="col-sm-4 col-lg-3 col-lg-push-9"> 
      <div class="alert alert-warning">A</div> 
     </div> 

     <div class="col-sm-4 col-lg-3 col-lg-pull-3"> 
      <div class="alert alert-info">B</div> 
     </div>  

     <div class="col-sm-8 col-lg-6 col-lg-pull-3"> 
      <div class="alert alert-danger">C</div> 
     </div> 

    </div> 
</div> 

А вот codepen: http://codepen.io/nebitno/pen/ORxjLv

Answer 1

Это довольно сложно. Вот решение, которое я придумал. Вам нужно будет использовать немного jQuery для получения желаемого результата.

Вот HTML, обратите внимание, как я переключился столбцы:

<div class="container text-center"> 
    <div class="row"> 

     <div class="col-sm-4 col-lg-3 col-lg-push-9"> 
      <div class="alert alert-warning">A</div> 
     </div> 

     <div class="col-sm-8 col-lg-6 col-lg-pull-0 big"> 
      <div class="alert alert-danger">C</div> 
     </div> 

     <div class="col-sm-4 col-lg-3 col-lg-pull-9 small"> 
      <div class="alert alert-info">B</div> 
     </div>  

    </div> 
</div> 

А вот JQuery:

<script> 
      var $iW = $(window).innerWidth(); 
      if ($iW < 768){ 
      $('.small').insertBefore('.big'); 
      }else{ 
      $('.big').insertBefore('.small'); 
      } 
    </script> 

Примечание: Недостатком является то, что JQuery не связан изменение размера окна. Поэтому, если вы изменили размер окна после загрузки документа, у вас будет довольно плохой результат. Однако это также можно исправить, используя $(window).resize(function(){});

Однако, если вы вообще не хотите использовать JS. Вот еще одно решение, которое потребует дублирования одного из ваших блоков. Если содержимое этого блока статично и не много, я считаю, что это хороший компромисс. Тем не менее, вы также можете немного настроить его в соответствии с вашими потребностями.

Вот HTML:

<div class="container text-center"> 
    <div class="row"> 

     <div class="col-sm-4 col-lg-3 col-lg-push-9"> 
      <div class="alert alert-warning">A</div> 
     </div> 

     <div class="col-sm-4 small-screen-only"> 
      <div class="alert alert-info">B</div> 
     </div> 

     <div class="col-sm-8 col-lg-6 col-lg-pull-0 big"> 
      <div class="alert alert-danger">C</div> 
     </div> 

     <div class="col-sm-4 col-lg-3 col-lg-pull-9 small"> 
      <div class="alert alert-info">B</div> 
     </div>  

    </div> 
</div> 

Обратите внимание на дублирование блока В.

Вот CSS:

 .small-screen-only{ 
      display: none; 
     } 

     @media all and (max-width: 767px) 
     { 
      .small-screen-only{ 
       display: block 
      } 

      .small{ 
       display: none; 
      } 
     } 

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

Answer 2

Я внес некоторые незначительные изменения в ваш html и добавил два способа jQuery для достижения функциональности. Вы можете использовать любой способ, который вам подходит.

HTML-

<div class="container text-center"> 
    <div class="row"> 

     <div class="col-sm-4 col-lg-3 col-lg-push-9"> 
      <div class="alert alert-warning">A</div> 
     </div> 

     <div class="col-sm-4 col-lg-3 col-lg-pull-3 B"> 
      <div class="alert alert-info">B</div> 
     </div>  

     <div class="col-sm-8 col-lg-6 col-lg-pull-3 C"> 
      <div class="alert alert-danger" >C</div> 
     </div> 

    </div> 
</div> 

JQuery (первый способ) -

var wH = $(window).innerWidth(); 
       if (wH < 992 && wH>=768){ 
       $('.C:parent').each(function() { 
        $(this).insertBefore($(this).prev('.B')); 
       }); 
       }else if(wH<768 || wH>=992) 
       { 
       $('.B:parent').each(function() { 
        $(this).insertBefore($(this).prev('.C')); 
       }); 
} 
$(window).resize(function() { 
      wH = $(window).innerWidth(); 
      if (wH < 992 && wH>=768){ 
      $('.C').insertBefore('.B');   
      }else if(wH<768 || wH>=992) 
      { 
      $('.B').insertBefore('.C');   
      } 
      }) 

проверить эту скрипку: http://jsfiddle.net/SkyT/wVVbT/150/

JQuery (второй способ) -

var wH = $(window).innerWidth(); 
       if (wH < 992 && wH>=768){ 
       $('.C').insertBefore('.B');   
       }else if(wH<768 || wH>=992) 
       { 
       $('.B').insertBefore('.C');   
       } 
$(window).resize(function() { 
       var wH = $(window).innerWidth(); 
       if (wH < 992 && wH>=768){ 
       $('.C:parent').each(function() { 
         $(this).insertBefore($(this).prev('.B')); 
       }); 
       }else if(wH<768 || wH>=992) 
       { 
       $('.B:parent').each(function() { 
         $(this).insertBefore($(this).prev('.C')); 
       });  
       } 
       }) 

Оформить эту скрипку: https://jsfiddle.net/SkyT/tst5g7ec/1/

Answer 3

Для CSS единственное решение, вы можете абсолютное положение колонка C относительно .row в точке останова sm и ясно столбец B. Держите HTML & CSS как с дополнительным CSS:

@media screen and (min-width: 768px) and (max-width : 1200px) { 

    .row { 
     position:relative; 
    } 

    .col-sm-4:nth-child(2) { 
     clear:left; 
    } 

    div[class^="col-"]:last-child { 
     position:absolute; 
     right:0; 
    } 

} 

Неудобство, поставляемая вместе с этим подходом является то, что .row не будет должным образом ясно, если высота Колонка C превосходит Столбец A + B ' s, как описано в Clearfix with absolute positioned elements.

Адрес updated version вашего Codepen.