Bootstrap 3 изменение порядка на маленьких экранах

Выполнение моего первого адаптивного дизайна и что-то подобное возможно в Bootstrap 3. Изменить это

к

Существенно измените порядок с макета из 3 столбцов на больших экранах, переместите логотип влево и разместите остальные два столбца только на небольших экранах. Я хотел бы сделать это, используя классы Bootstrap (col-xs-6 col-md-4 и т.д.), Если это возможно, и не нужно дублировать контент в стиле "показать/скрыть". Мне понравился макет сетки bootstrap3 для больших экранов, поэтому я предпочел бы сохранить его, если бы мог отсортировать макет на меньших экранах.

Ответы

Ответ 1

DEMO: http://jsbin.com/uZiKAha/1

DEMO w/edit: http://jsbin.com/uZiKAha/1/edit

Да, это можно сделать без JS, используя вложение BS3 и нажатие/вытягивание, и все поплавки очищаются:

 <div class="container">
  <div class="row">
   <div class="col-xs-6 col-sm-4 col-sm-push-4 boxlogo">
    LOGO
   </div>
   <div class="col-xs-6 col-sm-8">
    <div class="row">
     <div class="col-sm-6 col-sm-pull-6 boxb">
      B
     </div>
     <div class="col-sm-6 boxa">
      A
     </div>
    </div>
    <!--nested .row-->

   </div>
  </div>
 </div>

Ответ 2

Использование бутстрапа 3:

<div class="row row-fluid">
   <div class="col-md-6 col-md-push-6">
       <img src="some-image.png">
   </div>

   <div class="col-md-6 col-md-pull-6">
       <h1>Headline</h1>
       <p>Lorem ipsum text of doom</p>
   </div>
</div>

Это работает, потому что, когда у них достаточно места, они сначала плавают в свои исходные позиции. Однако, когда размер в среднем и пространство теряется, они затем складываются, поскольку они не могут плавать через eachother. Обратите внимание, что, хотя я использовал 6 столбцов для обоих, это работает, даже если они НЕ оба 6 столбца.

Вот ссылка: http://ageekandhisblog.com/bootstrap-3-change-stacking-order/

Ответ 3

В общем, вы хотите группировать элементы, которые стекают, но в вашем случае B и A не могут быть сгруппированы, так как Logo необходимо вставить между ними в одном случае. У вас есть две опции

Без использования JS я думаю, что это будет вашим лучшим вариантом. скрипка здесь

<div class="container">
    <div class="logo col-sm-4 col-xs-6 col-sm-push-4">Logo<br/>Logo</div>
    <div class="contentB col-sm-4 col-xs-6 col-sm-pull-4">B</div>
    <div class="contentA col-sm-4 col-xs-6 col-xs-offset-6 col-sm-offset-0">A</div>
</div>

Идея состоит в том, чтобы использовать свойство rollover для строк, чтобы нажать A вниз в случае xs. Я также использую классы push/pull для перегруппировки div в случае sm. Однако проблема здесь в том, что Logo выше, чем B. Поскольку все находится в одной и той же сетке, A выравнивается с нижней частью большего элемента, давая нам пробел между Logo и B. У этого действительно нет никакого решения с чистым Bootstrap CSS. (Может быть, кто-то может исправить меня)

Вместо этого я предлагаю вам использовать JS для перемещения div при изменении размера окна. скрипка здесь

<div class="container">
    <div id="column1" class="row col-xs-6 col-sm-8">
        <div id="B" class="col-xs-12 col-sm-6">B</div>
        <div id="logo" class="col-xs-12 col-sm-6">Logo<br/>Logo</div>
    </div>
    <div id="column2" class="row col-xs-6 col-sm-4">
        <div id="A" class="col-xs-12 col-sm-12 ">A</div>
    </div>
</div>

и JS

$(function() {
    $(window).resize(function() {
        var w = $(window).width();
        if (w < 768 && $('#column1').children().length > 1) {
            $('#B').prependTo( $('#column2') );
        } else if (w > 768 && $('#column2').children().length > 1) {
            $('#B').prependTo( $('#column1') );
        }
    });
});

EDIT: Обратитесь к бутстрапу grid docs для информации о классах push/pull/offset.

Ответ 4

Мне удалось исправить это, заменив содержимое столбцов с помощью jQuery. Здесь разметка:

<div class="container">
    <div class="row">
        <div class="col-sm-4 swap-col">
            columns 1
        </div>

        <div class="col-sm-4 swap-col">
            columns 2
        </div>

        <div class="col-sm-4 swap-col">
            columns 3
        </div>
    </div>
 </div>

И здесь jQuery script:

$(document).ready(function(){

    var col1_data,col2_data;

    col1_data = $(".footer-col:nth-child(1)").html();
    col2_data = $(".footer-col:nth-child(2)").html();

    var w = $(window).width();        

    if (w < 768)
    swap_columns();

    function swap_columns()
    {
        var w = $(window).width();
        if (w < 768)
        {
            $(".footer-col:nth-child(2)").html(col1_data);
            $(".footer-col:nth-child(1)").html(col2_data);
        }
        else
        {
            $(".footer-col:nth-child(1)").html(col1_data);
            $(".footer-col:nth-child(2)").html(col2_data);
        }
    }


    $(window).resize(function() {
        swap_columns();
    });
});

Надеюсь, это поможет.