Переупорядочить div для отзывчивого дизайна в Bootstrap

Я использую bootstrap. У меня есть строка с тремя блоками:Переупорядочить div для отзывчивого дизайна в Bootstrap

<div class="row"> 
    <div class="span3" id="B">...</div> 
    <div class="span4" id="A">...</div> 
    <div class="span3" id="C">...</div> 
</div>

Так что три блока упорядочиваются B, A, C.

Если ширина экрана мала, три блока будут иметь по одному ряду для каждого, а также упорядочены как B, A, C.

Но я хочу, чтобы они заказываются как

A 
B 
C

Как я могу это сделать?

источник

2013-04-06 DrXCheng

Попробуйте это:

<div class="row"> 
    <div class="pull-left"> 
     <div class="span4 pull-right" style="margin-left:0px;">A</div> 
     <div class="span3 pull-left" style="margin-left:0px;">B</div> 
    </div> 
    <div class="pull-right"> 
     <div class="span3">C</div> 
    </div> 
</div>

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

источник

2013-04-06 06:00:43 user2251506

+1 для упоминания 'pull- *'. Я пробовал это только с двумя прогонами, и это не сработало. У меня есть 'A | B', и я хочу, чтобы на мобильном устройстве отобразился 'B' поверх' A'. Используя ваш код, он отображает 'B' всегда в крайнем левом углу и' A' где-то справа – dialex

Мой ответ очень прост, эффективен и не требует навыков, чтобы сделать:

сделать ваш HTML структура выглядит следующим образом:

<div class="row"> 
    <div class="span1" id="B">...</div> 
    <div class="span2" id="A">...</div> 
    <div class="span3" id="B">...</div> 
    <div class="span4" id="C">...</div> 
</div>

теперь в вашем <head> элемента включают в себя следующее:

<link rel='stylesheet' type='text/css' media="all and (min-width:1024px)" href='bigdevice.css' /> 
<link rel='stylesheet' type='text/css' media="all and (max-width:1024px)" href='smalldevice.css'>

в вашем smalldevice.css

.span1 {display:none;}

в вашем bigdevice.css

.span3 {display:none;}

источник

2013-04-06 04:12:55 shnisaka

-1

Другой способ приблизиться к этому является использование этого:

<html> 
<head> 
<style type="text/css"> 
@media all and (min-width: 1024px) { 
.span3 {display:none;} 
} 
@media all and (max-width: 1024px) { 
.span1 {display:none;} 
} 
</style> 
</head> 
<body> 
<div class="row"> 
    <div class="span1" id="B">...</div> 
    <div class="span2" id="A">...</div> 
    <div class="span3" id="B">...</div> 
    <div class="span4" id="C">...</div> 
</div> 
</body> 
</html>

источник

2013-04-06 04:22:13 shnisaka

Попробуйте это, его простой пример. Надеюсь, это поможет вам.

@media screen and (min-width: 320px) and (max-width: 480px){ 
    #row{position: relative;color:#fff;} 
    #B{background:#000;width:100%;height:50px;float:left;position: absolute;top:50px;} 
    #A{background:#666;width:100%;height:50px;clear:both;position: absolute;top:0;} 
    #C{background:#aaa;width:100%;height:50px;float:left;position: absolute;top:100px;} 
    }

Для больших экранов вам не нужно скрывать какие-либо элементы. просто попытайтесь позиционировать его абсолютно.

@media screen and (min-width:481px) { 
    #row{position: relative;} 
    #B{background:#000;width:100%;height:50px;} 
    #A{background:#666;width:100%;height:50px;} 
    #C{background:#aaa;width:100%;height:50px;} 
    }

источник

2013-04-06 19:38:28

Переупорядочить div для отзывчивого дизайна в Bootstrap

ответ

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