How to design rowspan using bootstrap div?

Question

How to design Grid system with bootstrap?

In large and medium display it will show 2 columns and 3 rows. First column will have 1 cell and second columns will have 3 cells.

In small and extra small display it will show only 1 column and 4 rows. Each cell will stack one after another in a single column. First column/cell from large or medium display should come first here.

Answer 1

Try this:

DEMO

       <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    First Column, First Cell
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    Second Column, First Cell
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    Second Column, Second Cell
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    Second Column, Third Cell
                </div>
            </div>
        </div>

Answer 2

Jake745 answer is right somehow but miss out the "row" div for the nested column. You can't have a column without a row so it is good to maintain that structure. Also, you don't need to repeat the column if you required all screen size to be spread to 12 or whatever size. ie, if you required mobile to take up 12 column while tablet onwards take up 6 columns, you just need to put "col-xs-12 col-sm-6" and anything above sm will always take up 6 columns automatically.

This way, you will reduce your code and not put in unnecessary codes. Hope this help.

   <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-6">
                First Column, First Cell
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6">
            <div class="row">
               <div class="col-xs-12">
                Second Column, First Cell
               </div>
               <div class="col-xs-12">
                Second Column, Second Cell
               </div>
               <div class="col-xs-12">
                Second Column, Third Cell
               </div>
           </div>
        </div>
    </div>