Смещение блоков при изменении разрешения (с или без bootstrap)

@HellNHeaven · Регистрация: 26.11.2015

Author24 — интернет-сервис помощи студентам

В общем, не получается классами push и pull довести до ума что бы при уменьшении разрешения, скажем до 767px и далее блок id="deviz" становился ниже блока id="header-foto". Выручайте, а то уже битый час читаю и не понимаю, они

HTML5

      <!DOCTYPE html>
<html lang="en">
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="boxer.ico">
 
    <title>Boxer</title>
 
    <!-- Стиль Bootstrap -->
    <link href="bootstrap.css" rel="stylesheet">
    <!-- Стиль страницы -->
    <link href="style.css" rel="stylesheet">
    <!-- Стиль адаптации дизайна -->
    <link href="responsive.css" rel="stylesheet">
  </head>
 
  <body>
    <div class="container">
 
<!-- Верхний блок-->
      <div class="navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="row">
      
 
      <div class="col-lg-6">
              
              <!-- Меню -->
          <div id="menu" class"col-lg-12 col-md-12 col-sm-12">
            <ul>
             <li id="medal1"><a href="#"><div>ТЕКСТ</div></a></li>
               <li id="medal2"><a href="#"><div>ТЕКСТ</div></a></li>
               <li id="medal3"><a href="#"><div>ТЕКСТ</div></a></li>
               <li id="medal4"><a href="#"><div>ТЕКСТ</div></a></li>
            </ul>
          </div>
        <!-- /Меню -->          
 
        <div class="container-fluid">
        <div class="row-fluid">
            <div class="centering">
         <!-- Девиз -->
          <div id="deviz" class="col-lg-12">
            ТЕКСТ <br />
          ТЕКСТ <br />
          ТЕКСТ
          </div>
        <!-- /Девиз -->
          </div>
          </div>
        </div> 
 
 
        </div>   
  
      <!-- Фото шапки -->
      <div class="col-lg-6 col-md-12 col-sm-12">
            
            <div id="header-foto" class="col-lg-12">    
              <div><img class="img-responsive" src="https://www.cyberforum.ru/images/boxer.png" alt="ТЕКСТ" /></div>
              </div>
 
                  </div>
        <!-- /Фото шапки -->
 
      </div>
      </div>
    </div>
    <!-- /Верхний блок -->
 
 
 
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="respond.min"></script>
</body>
</html>

Пока нашел только решение на JS:

Javascript

<script src="js/jquery-1.11.1.min.js"></script>
<script>
function windowSize(){
  if ($(window).width() <= '767')
  {
    $('#deviz').detach().insertAfter('#header-foto');
  } 
  else 
  {
    $('#header-foto').detach().insertAfter('#deviz');
  }
}
$(window).load(windowSize); 
$(window).resize(windowSize);
</script>

Хотелось бы обойтись без лишних скриптов, но застрял в попытках понять как.

@Анар · 08.12.2015, 04:10

HellNHeaven, вы блок deviz ниже блока header-foto, средствами css, не поставите никак, потому что они в разных контейнерах находятся и у блока deviz есть сосед, который в случае смены мест переедет вместе в deviz'ом.
Добавьте:

CSS

.row {
    display: flex;
    flex-direction: column-reverse;
}

Или:

CSS

@media (max-width: 767px) {
.row {
    display: flex;
    flex-direction: column-reverse;
}}

И смотрите что у вас получается. Флексбоксом можно перетасовывать блоки хоть в произвольном порядке, но для этого они должны быть заключены в один контейнер (блок).

Для чего у вас в коде столько лишних блоков?

@HellNHeaven · 08.12.2015, 04:39 **[ТС]**

Анар, Блоков много для центрирования по вертикали и горизонтали, надо подумать как сократить.)
Flexbox это конечно супер простое и эффективное решение для многих задач, вот только проблема с совместимостью остаётся, напрочь отрубается IE 9-, хоть это и лучший вариант в крайнем случае. Спасибо!

@Анар · 08.12.2015, 05:21

HellNHeaven, зачем вам IE9-? Этими браузерами не пользуется практически никто, доля IE всех версий, включая IE10 и 11 в районе 8-9% в 13 или 14 году и уменьшается. А это само по себе мало, а доля 9- вообще околонулевая. Тем более этот браузер похоронили даже сами майкрософты.

Мой совет, верстайте ориентируясь на blink (хром и ему подобные), а дальше можете особо принципиальные моменты кросбаузерить на лису и вебкит. Вся кросбраузерность заключается в использовании вредоносных свойств, хотя иногда приходится узнавать и некоторые особенности браузеров.

@HellNHeaven · 08.12.2015, 06:04 **[ТС]**

Анар, Благодарю за дельный совет! Пожалуй, вы правы, я просто увлёкся своей принципиальностью, когда начинал. Тем более, что эти, скажем 5% со старыми IE будут всё равно видеть всё ясно, кроме нужного порядка в маленьком разрешении (в моём случае). Честно говоря, поехал я совсем с этой кроссбраузерностью, хотелось объять всё и сразу.

@HellNHeaven 0 / 0 / 2 Регистрация: 26.11.2015 Сообщений: 33
	08.12.2015, 04:39 [ТС]	3
	Анар, Блоков много для центрирования по вертикали и горизонтали, надо подумать как сократить.) Flexbox это конечно супер простое и эффективное решение для многих задач, вот только проблема с совместимостью остаётся, напрочь отрубается IE 9-, хоть это и лучший вариант в крайнем случае. Спасибо! 0

@Анар 225 / 216 / 89 Регистрация: 12.09.2015 Сообщений: 986
	08.12.2015, 05:21	4
	HellNHeaven, зачем вам IE9-? Этими браузерами не пользуется практически никто, доля IE всех версий, включая IE10 и 11 в районе 8-9% в 13 или 14 году и уменьшается. А это само по себе мало, а доля 9- вообще околонулевая. Тем более этот браузер похоронили даже сами майкрософты. Мой совет, верстайте ориентируясь на blink (хром и ему подобные), а дальше можете особо принципиальные моменты кросбаузерить на лису и вебкит. Вся кросбраузерность заключается в использовании вредоносных свойств, хотя иногда приходится узнавать и некоторые особенности браузеров. 1

@HellNHeaven 0 / 0 / 2 Регистрация: 26.11.2015 Сообщений: 33
	08.12.2015, 06:04 [ТС]	5
	Анар, Благодарю за дельный совет! Пожалуй, вы правы, я просто увлёкся своей принципиальностью, когда начинал. Тем более, что эти, скажем 5% со старыми IE будут всё равно видеть всё ясно, кроме нужного порядка в маленьком разрешении (в моём случае). Честно говоря, поехал я совсем с этой кроссбраузерностью, хотелось объять всё и сразу. 0

Смещение блоков при изменении разрешения (с или без bootstrap)

Решение