CODEWITHSUNDEEP
csstwitter-bootstrap
Dan Tappin
Dan Tappin

Reputation: 3032

Forcing an irregular Bootstrap column / row wrapping

I have a typical grid layout as seen attached:

enter image description here

I have 2 rows - one with the widget / header columns and another with the sidebar and content. I did this to keep the widget and header height the same and responsive WITHOUT specifying the height via CSS.

The issue is when it wraps for mobile I want the header and content to stay together at the bottom. I can do a single row with two columns then nest two rows in each but then I am back to specifying the height of the first rows of each nested grid.

I can make that work but it just seems to me that perhaps there is a more elegant solution which escapes me at the moment.

Upvotes: 0

Views: 809

Answers (1)

arshad
arshad

Reputation: 883

DEMO

Instead of putting widget-header & sidebar-content pairs in 2 separate rows & using pull & pushto adjust the grid, you can easily put widget-sidebar in one column & header-content in another to solve the problem.

HTML:

<div class="col-sm-6 main">
 <div class="col-sm-12 a">Widget</div>
 <div class="col-sm-12 a">sidebar</div>
</div>
<div class="col-sm-6 main">
 <div class="col-sm-12 a">header</div>
 <div class="col-sm-12 a">content</div>
</div>

CSS:

.a{ /*for demo only*/
    height:100px;
    border:2px solid red;
}
.main{
    padding:0px; /*for no padding between 2 columns in small devices*/
}

Upvotes: 2

Related Questions