Bootstrap 3.3.6 Grid boundaries not providing a rigid structure

Question

I am attempting to get familiar with Bootstrap and the Grid. I am attempting to create the following macro layout:

===================================================
| PageTitle              |________________________|
|________________________| +1  |________| img| img|
| Make a choice.         |_____|________|____|____|
|                        |                        |
===================================================

The main element is a jumbotron, within which there is a row. I then split the row into two <div> elements of class="col-xs-12" each (I want the left panel to remain above the right on mobile).

The left panel is further split into two rows with some text content.

The right panel contains a row, split into two sections once again. The left and right sections are both class="col-xs-12 col-sm-3". This is to ensure that on smaller screens they each fit one on top of the other and fill the entire horizontal space. A row and further column substructure splits the space as shown.

Here is my code so far: Link

As you will be able to see, the layout is behaving as I would expect at xs size (below 768px). However, at the larger size, rows and columns in the right panel are overlapping each other, and the images have disappeared.

Any guidance in understanding why the grid is not operating as I would expect (i.e. as a table that intelligently reflows at different screen sizes), would be appreciated!

Answer 1

The grid structure on the right panel of small device seems to be wrong.

In the code snippet of your JSFiddle. On line number 17 and 32, change class="col-xs-6 col-sm-3" to class="col-xs-6 col-sm-6".

This would make the images appear again.

Updated:

Ofcourse you can, You just need to change the approach your taking to construct, and any structure is possible. Check this Fiddle. It shows columns under rows and rows under columns structure in a way simple to understand.

In your case what you need to do is at the top-most level divide your structure into 4 columns and do whatever you want inside each column.

Easiest way to approach and understand any complicated structure :

• First Determine how many columns your structure needs. The top-most should always be divided taking columns into consideration.

• Once columns are determined, Consider each column as a full width page(ignoring the other columns for time being) and divide again and so on.

Simple :-)