Макет Bootstrap 3 включает комбинацию push / pull, div «rowspan» и переупорядоченные div для мобильных устройств

Я искал всюду до публикации, так что извините, если это дубликат; ничего, что я нашел, не рассматривал мою конкретную проблему.

Мне нужно, чтобы divs упорядочивались по-разному между рабочим столом и мобильным телефоном, используя Bootstrap 3. Примечание. Я мог бы сделать это, если бы я все жестко запрограммировал, но я вынужден использовать Bootstrap, и я знаю, что есть решение, которое вмещает как рабочий стол, так и мобильный.

Вот макет рабочего стола. Я не могу понять комбинацию классов push / pull.

Я попытался переместить содержащий div div для div 3 и div 4, чтобы появиться после div 1 и потянуть его на 6 столбцов, но div 1 исчезнет. Я добавляю pull к div 1, и он полностью скрыт от просмотра. Я добавил clearfix для содержащего строку div без успеха.

Вот Кодепен .

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                <p>1</p>
            </div>
        </div><!--/.row-->

        <div class="row">
            <div class="col-md-6">
                <p>3</p>
            </div>
            <div class="col-md-6">
                <p>4</p>
            </div>
        </div><!--/.row-->
    </div>

    <div class="col-md-6">
        <p>2</p>
    </div>
</div><!--/.row-->

Разметка рабочего стола

Мобильная компоновка

Подойдет перерыв и попробую позже, но подумал, что я отправлю за это время. /вздох

html,css,twitter-bootstrap-3,responsive,

0

Ответов: 0

Макет Bootstrap 3 включает комбинацию push / pull, div «rowspan» и переупорядоченные div для мобильных устройств

Я искал всюду до публикации, так что извините, если это дубликат; ничего, что я нашел, не рассматривал мою конкретную проблему.

Мне нужно, чтобы divs упорядочивались по-разному между рабочим столом и мобильным телефоном, используя Bootstrap 3. Примечание. Я мог бы сделать это, если бы я все жестко запрограммировал, но я вынужден использовать Bootstrap, и я знаю, что есть решение, которое вмещает как рабочий стол, так и мобильный.

Вот макет рабочего стола. Я не могу понять комбинацию классов push / pull.

Я попытался переместить содержащий div div для div 3 и div 4, чтобы появиться после div 1 и потянуть его на 6 столбцов, но div 1 исчезнет. Я добавляю pull к div 1, и он полностью скрыт от просмотра. Я добавил clearfix для содержащего строку div без успеха.

Вот Кодепен .

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                <p>1</p>
            </div>
        </div><!--/.row-->

        <div class="row">
            <div class="col-md-6">
                <p>3</p>
            </div>
            <div class="col-md-6">
                <p>4</p>
            </div>
        </div><!--/.row-->
    </div>

    <div class="col-md-6">
        <p>2</p>
    </div>
</div><!--/.row-->

Разметка рабочего стола

Мобильная компоновка

Подойдет перерыв и попробую позже, но подумал, что я отправлю за это время. /вздох

00HTML, CSS, твиттер-самозагрузка-3, отзывчивая,
Похожие вопросы