Where to place bootstrap row class

Question

Im fairly new to bootstrap and the concept of responsive design.

I was reading over the bootstrap docs and following some tutorials on w3schools. All mentions

Answer 1

It's just proper nesting..the problem that you have mentioned in your question can be solved in the following way-- As you can see a mobile device will display 2 rows and 2 columns and on desktop a single column will have 4 rows-- Although it can be achieved using many other div nesting methods, I have shown only one such configuration to achieve your desired layout.

 
      
      
       
       
       
       
       
       

            


                

                AAAAAAA
                

                

                BBBBBBBBBB
                
                
                

                

                CCCCCCCCCCC
                

                

                DDDDDDDDDDD