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

Answer 1

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.

Answer 2

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.