Адаптивный дизайн - расположение блоков

237

15 февраля 2017, 21:28

Есть шаблон адаптивного дизайна сайта https://jsfiddle.net/u0t72dgh/

В мобильном представлении (до 768px - сверху вниз - одним единственным блоком) идёт шапка, потом содержимое, а уже потом правая колонка.

Я добавил дополнительную колонку и пытаюсь её заставить отображаться следующим образом: шапка -> содержимое -> левая колонка -> правая колонка. А ОТ 768px и до 1024px разместить в правой части страницы содержимое левой колонки, а сразу за ним правой, а в левой части должен отображаться блок с содержимым. А уже от 1025px переносить левую колонку с содержимым в левую часть, в итоге структура должна стать такой (слева направо): левая колонка -> содержимое -> правая колонка.

Вот эта картинка наглядно демонстрирует описанное выше.

Как этого достичь?

Answer 1

Можно сделать на чистом css, без скриптов. Высота блоков может быть резиновая:

        .header{ 
      background-color:#ff7369; 
      width:90%; 
      margin:0 auto; 
    } 
    .wrapper{ 
      position:relative; 
      width:90%; 
      margin:0 auto; 
      background-color:#0dff78; 
    } 
    .wrapper:before, 
    .wrapper:after{ 
      content:''; 
      display:table; 
    } 
    .wrapper:after{ 
      clear:both; 
    } 
    .content{; 
      background-color:#ff79b8; 
      position:relative; 
      float:left; 
      left:20%;/*ширина левой колонки для десктопа 1 из 2*/ 
      width:60%;/*ширина контента для десктопа 1 из 2*/ 
      min-height:1px; 
    } 
    .aside-left{ 
      background-color: #fff595; 
      float: left; 
      position: relative; 
      width: 20%;/*ширина левой колонки для десктопа 2 из 2*/ 
      left: -60%;/*ширина контента для десктопа 2 из 2*/ 
    } 
    .aside-right{ 
      background-color:#97f5ff; 
      width:20%; 
      float:right; 
    } 
    /*media*/ 
    @media (max-width:1024px){ 
      .content{ 
        left:initial; 
        width:70%; 
      } 
      .aside-left{ 
        float:right; 
        left:initial; 
        width:30%; 
      } 
      .aside-right{ 
        width:30%; 
        position:relative; 
        clear:right; 
      } 
    } 
    @media (max-width:768px){ 
      .content, 
      .aside-right, 
      .aside-left{ 
        float:none; 
        width:100%; 
      } 
    } 
    /*media*/

        <div class="header">header</div> 
    <div class="wrapper"> 
      <div class="content">content</div> 
      <div class="aside-left">aside-left</div> 
      <div class="aside-right">aside-right</div> 
    </div>

Answer 2

Вариант без flaot-ов.

http://codepen.io/aliencash/pen/ygZeEv?editors=1100

* { 
  padding: 0; 
  margin: 0; 
} 
.container { 
  display: flex; 
  flex-wrap: wrap; 
} 
.header, 
.leftside, 
.content, 
.rightside { 
  min-height: calc(100vh - 3em - 16px); 
  margin: 8px; 
} 
.header { 
  background-color: blue; 
  width: 100%; 
  flex: 12 0 100%; 
  min-height: 3em; 
  margin-top: 0; 
  margin-left: 0; 
} 
.leftside { 
  background-color: red; 
  flex: 2; 
  margin-left: 0; 
  margin-bottom: 0; 
} 
.content { 
  background-color: green; 
  flex: 8; 
  margin-bottom: 0; 
} 
.rightside { 
  background-color: yellow; 
  flex: 2; 
  margin-right: 0; 
  margin-bottom: 0; 
} 
@media all and (max-width: 1024px) { 
  .container { 
    position: relative; 
  } 
  .leftside { 
    order: 3; 
    flex: 4; 
    margin-right: 0; 
    margin-left: 8px; 
    margin-bottom: 8px; 
    min-height: auto; 
    height: calc(50vh - 3em - 16px); 
  } 
  .content { 
    order: 2; 
    flex: 8; 
    margin-left: 0; 
    margin-bottom: 0; 
  } 
  .rightside { 
    position: absolute; 
    right: 0; 
    order: 4; 
    margin-top: 0; 
    top: calc(50vh + 16px); 
    width: calc((100% - 16px)/3); 
    min-height: calc(50vh - 16px); 
  } 
} 
@media all and (max-width: 768px) { 
  .container { 
    position: static; 
    flex-direction: column; 
  } 
  .header, 
  .leftside, 
  .content, 
  .rightside { 
    flex: 12; 
    margin: 0; 
    margin-bottom: 16px; 
    height: auto; 
  } 
  .leftside, 
  .rightside { 
    min-height: 25vh; 
  } 
  .rightside { 
    position: static; 
    width: 100%; 
    margin-bottom: 0; 
  } 
  .content { 
    min-height: 50vh; 
  } 
}

<div class="container"> 
  <div class="header"></div> 
  <div class="leftside"></div> 
  <div class="content"></div> 
  <div class="rightside"></div> 
</div>