Позиционирование элементов в HTML

170

14 октября 2018, 16:00

Eсть такая задача: На моем сайте с десктоп версией есть блоки со списками:

<div class="let-column" style="width: 49%; float: left"> 
  <ul> 
    <li>Таб_1</li> 
    <li>Таб_2</li> 
    <li>Таб_3</li> 
  </ul> 
</div> 
 
<div class="right-column" style="width: 49%; float: left"> 
  <ul> 
    <li>Тело_1</li> 
    <li>Тело_2</li> 
    <li>Тело_3</li> 
  </ul> 
</div>

Что дает мне некую природу табов в 2 колонки.

Требуется на мобильной версии сайта сделать так, чтобы те же блоки располагались вот так:

<div class="let-column" style="width: 49%; float: left"> 
  <ul> 
    <li>Таб_1</li> 
    <li>Тело_1</li> 
    <li>Таб_2</li> 
    <li>Тело_2</li> 
    <li>Таб_3</li> 
    <li>Тело_3</li> 
  </ul> 
</div> 
 
<div class="right-column" style="width: 49%; float: left; display: none"> 
  <ul> 
  </ul> 
</div>

Answer 1

Вместо перемещение елементов, можно добавить во второй список елеметы первого и скрывать/показывать их с помощью @media

.tabs { 
  display: flex; 
  width: 100%; 
  border: 1px solid #eaeaea; 
  padding: 15px; 
} 
 
.tabs__nav, 
.tabs__content { 
  flex: 1 1 50%; 
  list-style: none; 
} 
 
@media only screen and (min-width: 640px) { 
  .tabs__mobile-item { 
    display: none;  
  } 
} 
@media only screen and (max-width: 640px) { 
  .tabs__nav { 
    display: none;  
  } 
}

<div class="tabs"> 
      <ul class="tabs__nav"> 
        <li class="tabs__nav-item">Tab 1</li> 
        <li class="tabs__nav-item">Tab 2</li> 
        <li class="tabs__nav-item">Tab 3</li> 
      </ul> 
      <ul class="tabs__content"> 
        <li class="tabs__nav-item tabs__mobile-item">Tab 1</li> 
        <li class="tabs__content-item">Content 1</li> 
    
        <li class="tabs__nav-item tabs__mobile-item">Tab 2</li> 
        <li class="tabs__content-item">Content 2</li> 
 
        <li class="tabs__nav-item tabs__mobile-item">Tab 3</li> 
        <li class="tabs__content-item">Content 3</li> 
      </ul> 
    </div>

Answer 2

.tabs { 
  display: flex; 
  flex-direction: column; 
  width: 100%; 
  border: 1px solid #eaeaea; 
  padding: 15px; 
} 
 
.tabs__nav { 
  display: flex; 
  justify-content: space-around; 
} 
 
@media only screen and (max-width: 640px) { 
  .tabs__nav { 
    flex-direction: column; 
    justify-content: space-around; 
  } 
}

<div class="tabs"> 
  <ul class="tabs__nav"> 
    <li class="tabs__nav-item">Tab 1</li> 
    <li class="tabs__content-item">Content 1</li> 
  </ul> 
  <ul class="tabs__nav"> 
    <li class="tabs__nav-item">Tab 2</li> 
    <li class="tabs__content-item">Content 2</li> 
  </ul> 
  <ul class="tabs__nav"> 
    <li class="tabs__nav-item">Tab 3</li> 
    <li class="tabs__content-item">Content 3</li> 
  </ul>