Wrap плавучие DIVS Отзывчивый вид

я просто интересно, если у меня есть макет, как этоWrap плавучие DIVS Отзывчивый вид

<div class="container"> 
<div class="left"> Left </div> 
<div class="right"> Right </div> 
</div>

изменения вида порт на 320 потребности прямо деление с появляться первые и левой DIV ниже него, возможно ли это ??????

источник

2013-08-09 user1452840

-1

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

<div class="container"> 
<div class="right"> Right </div> 
<div class="left"> Left </div> 
</div>

Это будет отображаться одна коробка под другим на мобильном телефоне. И теперь мы используем CSS, чтобы переупорядочить их на больших экранах (выше 320 пикселей):

@media only screen and (min-width : 481px) { 
    .left { float: left; } 
    .right { float: right; } 
}

источник

2013-08-09 05:19:20 Angelin

OP хочет без изменения HTML порядка. –

Это правильный подход при проектировании для мобильных устройств. Javascript DOM-манипуляция - это еще один подход, но он плохо справляется с производительностью на мобильных устройствах и НЕ должен использоваться. – Angelin

OP хочет изменить порядок не слева и не справа. –

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

<html><head></head><body><div class="container" style=" 
    display: -webkit-flex; 
"> 
    <div class="left" style=" 
    -webkit-flex-flow: column; 
    background: lightgray; 
"> Left </div> 
    <div class="right" style=" 
    -webkit-flex-flow: column; 
    background: yellow; 
    -webkit-order: -1; 
"> Right </div> 
</div> 
</body></html>

Оригинальный источник: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

источник

2013-08-09 05:20:44

Не работает :: http://jsfiddle.net/wTFS2/ –

ok, пожалуйста, проверьте источник этой страницы: http://www.petercarrero.com/reverse.html (код, ориентированный на webkit, но тот же кросс- решение для браузера доступно на https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes) –

привет, я получил ваш код jsfiddle, работающий по адресу http://jsfiddle.net/9ndMN/ –

Wrap плавучие DIVS Отзывчивый вид

ответ

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