Как изменить порядок двух div на мобильном телефоне?

Question

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

<div class="container">
    <div class="div1"></div>
    <div class="div2"></div>
</div>

Можно ли изменить его так, чтобы он изменился на

<div class="container">
    <div class="div2"></div>
    <div class="div1"></div>
</div>

css html

3

Mazodude 4 Май 2016 в 04:05

Answer 1

Для этого вы можете использовать чистый CSS

.container{
    display:table;
}
.div1{
    display:table-footer-group;
}
.div2{
    display:table-header-group;
}

Убедитесь, что вы добавили его в запрос @media.

1

Matt Pfeffer 4 Май 2016 в 01:06

Answer 2

Вы можете использовать два отдельных класса и делать видимым только один за раз в зависимости от ширины носителя.

Сначала создайте свой CSS

//This container is only visible on devices with 1025px or more such as iPad in landscape or portrait view
@media screen and (min-width: 1025px)  {
    .desktop-container {
    Display:none;
    }
 }


// This container is only visible on smaller devices with screen size 360px - 1024px
@media screen and (min-width:360px) and (max-width:1024px) {
    .mobile-container {
     Display:none;
    }
 }

Теперь создайте свою разметку ...

<div class="desktop-container">
  <div class="div1"></div>
  <div class="div2"></div>
</div>

<div class="mobile-container">
  <div class="div2"></div>
  <div class="div1"></div>
</div>

-1

user1724434 4 Май 2016 в 01:22

Answer 3

Вы можете сделать это с помощью flexbox, изменив порядок.

.container {
  display: flex; /* or inline-flex */
  flex-direction: column;
}
@media(min-width:768px){
  .container {
    flex-direction: column-reverse;
  }
}

http://codepen.io/partypete25/pen/oxJNqz

3

partypete25 4 Май 2016 в 01:56

Answer 4

В зависимости от того, какие браузеры вам нужно поддерживать, вы можете использовать flexbox для переключения порядка div.

.container {
  display: flex;
}
.div1 {
  order: 0;
}
@media screen and (min-width: 780px)  {
  .div1 {
    order: 1;
  }
}

JS Fiddle

4

moettinger 4 Май 2016 в 01:31

Как изменить порядок двух div на мобильном телефоне?

4 ответа

Похожие вопросы

Новые вопросы

css