Изменение порядка дивы в зависимости от размера экрана над строками

Я пытаюсь с Bootstrap сделать следующие на большие экраныИзменение порядка дивы в зависимости от размера экрана над строками

+--+--+--+--+--+--+--+--+--+--+--+--+ 
| div1 |  div2  | div3 | 
+--+--+--+--+--+--+--+--+--+--+--+--+

но когда опускаясь на небольших экранах, мне нужно следующее:

+--+--+--+--+--+--+--+--+--+--+--+--+ 
|  div1  |  div3  | 
+--+--+--+--+--+--+--+--+--+--+--+--+ 
|    div2    | 
+--+--+--+--+--+--+--+--+--+--+--+--+

очевидно, первая часть проста:

<div class="row"> 
    <div class="col-md-3">div1</div> 
    <div class="col-md-6">div2</div> 
    <div class="col-md-3">div3</div> 
</div>

, но добавление функций для второй части, где я застрял.

Я попытался следующие, но это только заканчивает беспорядок, с колоннами в том же порядке:

<div class="row"> 
    <div class="col-md-3 col-sm-6">div1</div> 
    <div class="col-md-6 col-sm-push-12">div2</div> 
    <div class="col-md-3 col-sm-pull-6">div3</div> 
</div>

Как я могу достичь желаемой функциональности?

источник

2014-12-05 dav_i

это не может быть уместным, чтобы ответить на вопрос, но почему вы хотите, чтобы это было в таком порядке? вместо обычного порядка 1-2-3 (12 малейших). – nCore

@nCore Спасибо за ответ. На моем сайте содержимое для 'div2' всегда будет больше содержимого' div1' и 'div3', поэтому имеет смысл сохранить их относительные размеры. –

Это решение требует добавления clearfix небольшого размера экрана:

<div class="row"> 
    <div class="col-sm-6 col-md-3"> 
     div1 
    </div> 
    <div class="col-sm-6 col-md-3 col-md-push-6"> 
     div3 
    </div> 
    <div class="clearfix visible-sm"></div> 
    <div class="col-sm-12 col-md-6 col-md-pull-3"> 
     div2 
    </div> 
</div>

источник

2014-12-05 09:46:40

Этот ответ на самом деле хорошо работает с размером 'xs'. С решением [Pete's solution] (http://stackoverflow.com/a/27313966/1185053) существует неприятный эффект, если на divs есть цвет фона (элементы в конечном итоге скрывают другие). –

С Jquery:

<body> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<div class="row"> 
    <div id="div1" class="col-md-3 col-sm-6">div1</div> 
    <div id="div2" class="col-md-6 col-sm-push-12">div2</div> 
    <div id ="div3" class="col-md-3 col-sm-pull-6">div3</div> 
</div> 

<script type="text/javascript"> 

$(window).resize(function(){ 

     if ($(window).width() <= 480) { 

       $("#div2").appendTo('#div3'); 

     } else 
     { 
       $("#div2").appendTo('#div1'); 
     } 

}); 



</script> 
</body>

источник

2014-12-05 09:44:26 toto21

Другой способ пойти об этом, что является немного более упрощенным, но использует только Bootstrap :

<div class="row"> 
    <div class="col-sm-6 col-md-3">div1</div> 
    <div class="visible-md visible-lg col-md-6">div2</div> 
    <div class="col-md-3">div3</div> 
</div> 
<div class="row visible-xs visible-sm"> 
    <div class=" col-sm-12">div2</div> 
</div>

источник

2014-12-05 10:36:50

это приведет к многому дублированному контенту (и больше данных для загрузки мобильных телефонов), что может замедлить время загрузки и вызвать проблемы с обслуживанием, как если бы вы обновили копию для div 2, вам нужно было бы запомнить это в 2-х местах – Pete

Если вы в состоянии переупорядочить свои divs, вы можете использовать следующие html a г классы:

<div class="row"> 
    <div class="col-md-3 col-sm-6">div1</div> 
    <div class="col-md-3 col-sm-6 pull-right">div3</div> 
    <div class="col-md-6 col-sm-12">div2</div> 
</div>

Example

источник

2014-12-05 10:37:31 Pete

Ваши работы так же, как [мое решение] (http://stackoverflow.com/a/27312990/1185053). Я добавил clearfix в это сейчас для правильной рендеринга. Ваш синтаксис приятнее, чем +1. –

Я думаю, что вы должны думать "мобильный первый" ..

<div class="row"> 
    <div class="col-xs-6 col-md-3"> div1 </div> 
    <div class="col-xs-6 col-md-3 col-md-push-6"> div3 </div> 
    <div class="col-xs-12 col-md-6 col-md-pull-3"> div2 </div> 
    </div>

Демо:http://bootply.com/zPPaDT4ZIG

источник

2014-12-05 13:25:37 ZimSystem

Изменение порядка дивы в зависимости от размера экрана над строками

ответ

Смежные вопросы