Добавить новую строку и изменить классы столбцов при изменении размера

Question

Я делаю сайт, который имеет два блока в правом углу. Я использую Bootstraps 3.0, а кавычки находятся в той же строке, что и блок описания текста о компании.

Когда я изменяю размер экрана до менее чем 768 пикселей, кавычки очищаются от сетки и заполняют всю ширину экрана. Я хотел бы использовать jQuery, чтобы закрыть строку с описанием и добавить новую строку для кавычек для мобильных экранов, затем удалить класс .col-md-3 и изменить его на .col-sm-6 (или col-xs-6) для обеих цитат divs, каждый из которых имеет идентификатор #quote1 и #quote2, затем закройте новую строку.

Это позволит текстовому описанию заполнить весь экран мобильного телефона, имея кавычки в двух отдельных столбцах подряд под ним. Heres код, который я до сих пор ...

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> 

Прямо сейчас я не вижу каких-либо классов изменить или divs добавил при просмотре сайта в браузер. Если вам нужно, чтобы я сделал jsFiddle, просто дайте мне знать.

Answer 1

Вам не нужно добавлять новую строку. В вашем случае вы можете использовать что-то вроде:

<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> 

Также посмотрите на примеры в http://getbootstrap.com/css/#grid-example-mixed-complete

В вашем примере кода вы используете среднюю сетку (col-md-*) эту сетку становятся horizotal выше 991px. Ваш javascript будет запущен ниже 768 пикселей. В этом примере вы пропустите ситуацию между 768 и 992 пикселями (небольшая сетка с col-sm-*).

В моем коде выше я использую col-xs, дополнительную небольшую сетку. Эта сетка никогда не будет стекаться. Таким образом, под кодом 992px цитата находится в «новой» строке с 50% шириной столбцов.

Update О (ваш) JQuery

1. window.width() не будет работать Используйте $(window).width()
2. insertBefore вставки тегов, включая закрывающие теги так </div><div> не будет работать или не намерены
3. при изменении размера ниже 768 col-sm-* не применяется.

Try что-то вроде:

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