2 or 3 responsive columns bootstrap

Question

I want to have variable number of columns using row span, to be specific 3 columns on xs, 2 columns on sm (first 2 columns one above another), and 3 columns on lg. I don't know how to implement responsive rowspan for sm screen.

Here is visual representation:

Here is my code so far:

<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>

And here is codepen: http://codepen.io/nebitno/pen/ORxjLv

Medard · Answer 1 · 2016-10-04T07:22:11.923

This is quite tricky. Here is the solution I came up with. You will need to use a bit of jQuery to get the desired result.

Here is the html, note how I switched the columns:

<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>

And here is the jQuery:

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

Note: the downside to this is that the jQuery is not bound to the window resizing. So If you were to resize the window after the document load, you will have pretty bad result. However, this can also be fixed by using $(window).resize(function(){});

However, if you don't want to use JS at all. Here is another solution that will require you to duplicate one of your blocks. If the contents of this block are static and not a lot, I believe this is a good compromise. However, you can also tweak it a bit to fit your needs.

Here is the 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>

Notice the duplication of block B.

Here is the CSS:

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

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

            .small{
                display: none;
            }
        }

I personally would choose the CSS option as it is more native to the browser. Even if the contents of the blocks were dynamically added, I believe you can still find a way around it.

@SS I personally also always try to find a way to eliminate js wherever possible. If the contents of your blocks are static, and not a lot and you don't mind duplicating them. I am going to add a second solution that uses only CSS. — Medard, Oct 04 '16 at 07:16

score 1 · Answer 2 · edited May 23 '17 at 10:27

For a CSS only solution, you can absolute position column C relative to the .row at breakpoint sm and clear column B. Keep your HTML & CSS as is with additional 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;
    }

}

The disadvantage coming along with this approach is that the .row won't properly clear if the height of Column C surpasses Column A + B's height as explained in Clearfix with absolute positioned elements.

Here is an updated version of your Codepen.

Aakash Thakur · Answer 3 · 2016-10-03T11:56:14.930

I made some slight changes to your html and added two jQuery ways to achieve the functionality. You can use any method that suits you better.

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(1st way)-

 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');        
          }
          })

Check out this fiddle: http://jsfiddle.net/SkyT/wVVbT/150/

jQuery(2nd way)-

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'));
                 });    
              }
              })

Checkout this fiddle:https://jsfiddle.net/SkyT/tst5g7ec/1/

Yes, but when I add content in the C look what happens http://jsfiddle.net/qn3o9trz/ . — S S, Feb 01 '19 at 16:49

2 or 3 responsive columns bootstrap

3 Answers3