Форум Сайтостроение Веб-строительство

как переупорядочить колонки CSS ?

12
[Удален]
1232

Здравствуйте. Разрабатываю адаптивный трехколоночный сайт (движок wordprss ), в котором слева и справа располагаются сайтбары, а контент между ними. Под десктопы и планшеты вроде боле менее адаптировал.

Проблема заключается в адаптации сайта к мобильным разрешениям экрана. В силу того, что ширина экрана довольно маленькая весь сайт помещаю в одну колонку - и в этом вся загвоздка. Так как при помещении сайта в одну колонку левый сайтбар становиться выше контента, а нужно сделать так, чтобы контент был на выше. Собственно, как разрешить эту проблему я и не знаю.

Вообщем нужно сделать так :

S
На сайте с 13.10.2014
Offline
171
silicoid
#1

огорчу. Без Js - никак

totamon
На сайте с 12.05.2007
Offline
437
totamon
#2

можно переопределить стили для мобильной версии, вы же медиа запросы используете? float-ом например...

Домены и хостинг https://8fn.ru/regru | Дедик от 3000р https://8fn.ru/73 | VPS в Москве https://8fn.ru/72 | Лучшие ВПС, ТП огонь, все страны! https://8fn.ru/inferno | ХОСТИНГ №1 РОССИИ https://8fn.ru/beget
I3
На сайте с 20.07.2012
Offline
106
ivan34502
#3
rezzov:
Здравствуйте. Разрабатываю адаптивный трехколоночный сайт (движок wordprss ), в котором слева и справа располагаются сайтбары, а контент между ними. Под десктопы и планшеты вроде боле менее адаптировал.

Проблема заключается в адаптации сайта к мобильным разрешениям экрана. В силу того, что ширина экрана довольно маленькая весь сайт помещаю в одну колонку - и в этом вся загвоздка. Так как при помещении сайта в одну колонку левый сайтбар становиться выше контента, а нужно сделать так, чтобы контент был на выше. Собственно, как разрешить эту проблему я и не знаю.

Вообщем нужно сделать так :

Мне вот это помогло, пример:

<!DOCTYPE html>
<html>
  <head>
    <title>foobar</title>
    <style>
      @media screen and (max-width:300px){
        #parent{
          display:flex;
          flex-flow: column;
        }
        #a{order:2;}
        #c{order:1;}
        #b{order:3;}
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="a">one</div>
      <div id="b">two</div>
      <div id="c">three</div>
    </div>
  </body>
</html>

http://jsfiddle.net/devnull/qyroxexv/

S
На сайте с 13.10.2014
Offline
171
silicoid
#4

ivan34502, Да... мисье знает толк в извращениях, Но идея интересная

[Удален]
#5

да, медиа запросы, как раз таки флоутом и не получается.

totamon
На сайте с 12.05.2007
Offline
437
totamon
#6
rezzov:
да, медиа запросы, как раз таки флоутом и не получается.

вы выложите пример разметки и стилей для основных дивов, кто знает каким вы способов их выводите, чтобы конкретно посоветовать что-то...

с flex интересный вариант выше привели, попробуйте)

Оптимизайка
На сайте с 11.03.2012
Offline
396
Оптимизайка
#7

можно через display: table-header-group вот например

http://jsfiddle.net/de8dts69/

IE8+ (flex хорошая штука но IE11), без всяких JS

⭐ BotGuard (https://botguard.net) ⭐ — защита вашего сайта от вредоносных ботов, воровства контента, клонирования, спама и хакерских атак!
[Удален]
#8

попробуй display: table-header-group и через display: flex, если не получиться скину свои стили.

anser06
На сайте с 11.03.2006
Offline
276
anser06
#9

Переопределять порядок div с помощью flex - хорошая штука, однако сервисы Гугла для мобильников отображают все иначе. Для них надо указывать старые версии синтаксиса.

В случае flex со старыми браузерами добавлять код для старых браузеров:

.page-wrap {
display: -webkit-box; /* OLD – iOS 6-, Safari 3.1-6 /
display: -moz-box; / OLD – Firefox 19- (buggy but mostly works) /
display: -ms-flexbox; / TWEENER – IE 10 /
display: -webkit-flex; / NEW – Chrome /
display: flex; / NEW, Spec – Opera 12.1, Firefox 20+ /
}
.main-content {
-webkit-box-ordinal-group: 1; / OLD – iOS 6-, Safari 3.1-6 /
-moz-box-ordinal-group: 1; / OLD – Firefox 19- /
-ms-flex-order: 1; / TWEENER – IE 10 /
-webkit-order: 1; / NEW – Chrome /
order: 1; / NEW, Spec – Opera 12.1, Firefox 20+ */
}

...

Отсюда – https://css-tricks.com/using-flexbox/

Для старых браузеров, не поддерживающих flex-direction:column, указывать:

display:-moz-box;
display:-ms-box;
display:-webkit-box;
display:box;
-webkit-box-orient:vertical;
/current syntax/
display:-moz-flex;
display:-ms-flex;
display:-webkit-flex;
display:flex;
-moz-flex-direction:column;
-ms-flex-direction:column;
-webkit-flex-direction:column;
flex-direction:column;

Отсюда – http://lists.w3.org/Archives/Public/www-style/2013Apr/0037.html

Если прописать, то будет работать одинаково как в гугловских сервисах, так и в современных мобильных браузерах.

[Удален]
#10

всем спасибо, получилось реализвать с помощью display: table-header-group

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий