Add new row and changing column classes on resize

I am making a site that has two blockquotes on the far right. I am using Bootstraps 3.0 and the quotes are in the same row as a block of description text about the company.

When I re-size the screen to less than 768px the quotes are cleared of the grid and fill up the full width of the screen. I would like to use jQuery to close the row with the description and add a new row for the quotes for mobile screens, then remove the .col-md-3 class and change it to .col-sm-6 (or col-xs-6) for both quote divs, each having an id of #quote1 and #quote2, then close the new row.

This would allow the description text to fill the entire mobile screen while having the quotes in two separate columns in a row below it. Heres the code I have so far...

HTML:

   <div class="row main-desc">
    <div class="col-md-7 col-md-offset-1">
     <h3 class="secondFont txtburgundy">Events/News</h3>
     <p class="firstFont 18pt txtlightburgundy">
     There is currently no new news at this time.
     </p>
     <hr />
     <p class="firstFont 18pt indentText">
     <span class="emph indent">W</span>elcome to Sticks and Stones Construction and   Landscaping! We are a family run business that exists to create unique and functional living spaces in Charlottesville, Virginia and the surrounding counties. We specialize in new home construction, remodeling, sustainable structures, patios, walkways, retaining walls, indoor/outdoor living spaces & kitchens, irrigation systems, landscape design, installation and maintenance. We cater to those who appreciate beauty and quality in and out of the home. The creativity, experience and pride we put into each project results in an exquisite finished product that is sure to exceed all expectations. Sticks and Stones thrives on making your dream a reality.
     </p>
     </div>
     <div id="quote1" class="col-md-3 quotes">
        <div class="secondFont 14pt quote index_quote">
            <div class="index_quote_img"></div>
                <blockquote>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </blockquote>
                    <div class="secondFont 12pt italic quoteAuthor">
                        <p>-Jacob Buller</p>
                   </div>
              </div>
            </div>
       <div id="quote2" class="col-md-3 quotes">
                <div class="secondFont 14pt quote index_quote">
            <div class="index_quote_img"></div>
                <blockquote>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </blockquote>
                    <div class="secondFont 12pt italic quoteAuthor">
                        <p>-Jacob Buller</p>
                    </div>
                    </div>
            </div>
        </div>
      </div>

jQuery:

<script type="text/javascript">
$(document).ready(function() {
        if (window.width() < 768) {
            $('</div><div class="row">').insertBefore('#quote1');
            $('#quote1').addClass('col-sm-6').removeClass('col-md-3');
            $('#quote2').addClass('col-sm-6').removeClass('col-md-3');
            $('</div>').insertBefore('.sticksFooter');

        }
        else {}
    });
$(window).resize(function() {   
        if (window.width() < 768) {
            $('</div><div class="row">').insertBefore('#quote1');
            $('#quote1').addClass('col-sm-6').removeClass('col-md-3');
            $('#quote2').addClass('col-sm-6').removeClass('col-md-3');
            $('</div>').insertBefore('.sticksFooter');

        }
        else {}
    });
</script>

Right now I don't see any classes change or divs added when viewing the site in a browser. If you need me to make a jsFiddle just let me know.

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'));
 }
});

Recommended topics

Hot tags