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

Question

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

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

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

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

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

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

Обновление о (вашем) jQuery

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

Попробуйте что-то вроде:

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