You Don't have to add a new row. In your case you could use something like:
<div class="container">
<div class="row main-desc">
<div class="col-xs-12 col-md-7 col-md-offset-1"></div>
<div id="quote1" class="col-xs-6 col-md-3 quotes">
<div id="quote2" class="col-xs-6 col-md-3 quotes"></div>
</div>
</div>
Also take a look at the examples at http://getbootstrap.com/css/#grid-example-mixed-complete
In your example code you use the medium grid (col-md-*
) this grid become horizotal above 991px. Your javascript will be triggered below 768 pixels. In this example you will miss the situation between 768 and 992 pixels (the small grid with col-sm-*
).
In my code above i use col-xs, the extra small grid. This grid will never stack. So under the 992px the quote are in a "new" row with 50% width columns.
Update About (your) jQuery
window.width()
won't work use$(window).width()
insertBefore
inserts the tags including closing tags so</div><div>
won't work or is not intend to- when you resize below 768
col-sm-*
will not be applied.
Try something like:
$(window).resize(function()
{
if ($(window).width() < 768)
{
var $foo = $( '<div />' ).addClass('row').insertAfter('.col-md-7')
.append($('#quote1').addClass('col-xs-6').removeClass('col-md-3'))
.append($('#quote2').addClass('col-xs-6').removeClass('col-md-3'));
}
});