Add new row and change column classes when resizing

Question

I am making a site that has two blocks in the right corner. I am using Bootstraps 3.0 , and the quotation marks are on the same line as the company text description block.

When I resize the screen to less than 768 pixels, the quotation marks are cleared from the grid and fill the entire width of the screen. I would like to use jQuery to close the description line and add a new line for quotes for mobile screens, then remove the .col-md-3 class and change it to .col-sm-6 (or col-xs-6 ) for both quotes divs , each of which has the identifier #quote1 and #quote2 , then close a new line.

This will allow the text description to fill the entire screen of the mobile phone, having quotes in it in two separate columns in the line below. Here is the code that I still have ...

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> 

At the moment, I do not see any changes to classes or divs when viewing a site in a browser. If you need me to do jsFiddle , just let me know.

Answer 1

You do not need to add a new line. In your case, you can 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 view examples at http://getbootstrap.com/css/#grid-example-mixed-complete

In your code example, you are using a medium grid ( col-md-* ), this grid becomes horizontal than 991px. Your javascript will run below 768 pixels. In this example, you will skip the situation between 768 and 992 pixels (a small grid with col-sm-* ).

In my code above I use col-xs, an extra small grid. This grid will never run off. Thus, under the code 992px, the quote is in the “new” row with 50% column width.

Update About (your) jQuery

• window.width() will not work $(window).width()
• insertBefore inserts tags, including closing tags, so </div><div> does not work or is not going to
• when resized below 768 col-sm-* will not apply.

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