Вопрос по flexbox, css, css3 – (Скрипка)

0

ужно изменить порядок всей моей страницы для мобильных устройств, используя Flex. Я могу заставить это работать внутри отдельного контейнера, но возможно ли это сделать со всеми контейнерами на странице? Вот пример:

.outer {
  display: flex;
  flex-direction: column;
}
#a {
  order: 4;
  background: #ccc;
}
#b {
  order: 1;
  background: #aaa;
}
#c {
  order: 3;
  background: #d33;
}
.one {
  order: 2;
  background: #aaa;
}
.two {
  order: 5;
  background: #aaa;
}
<div class="outer">
  <div id="flex">
    <div id="a">A</div>
    <div id="b">B</div>
    <div id="c">C</div>
  </div>
  <div id="flex2">
    <div class="one">Show me 2nd</div>
    <div class="two">Show me 5th</div>
  </div>
</div>

«Покажи мне 2-е» и «Покажи мне 5-е» просто сидят в конце, а не в новом порядке. Чтобы подтвердить, HTML не может быть изменен.

JsFiddle

Благодарю. Это только для мобильных устройств. Так может отображаться: содержание работает для этого? IVCatalina
вам нужно запустить какой-нибудь тест на разных мобильных телефонах / браузерах, но, боюсь, это пока не сработает G-Cyr
Не могли бы вы дать мне знать, чего не хватает в моем ответе? Так что я могу приспособиться, и вы согласитесь. LGSon
Как бы я сделал это с Javascript DOM? Я обновил свою скрипку JS:jsfiddle.net/chotd9sv/4 IVCatalina
display: содержимое может помочь, если оно доступно не в Firefoxjsfiddle.net/chotd9sv/3 как это вам нужно Javascript, чтобы восстановить домdeveloper.mozilla.org/en-US/docs/Web/CSS/display посмотрите на дисплей: окно для объяснения илиw3.org/TR/css-display-3/#box-generation G-Cyr

Ваш Ответ

2   ответа
0

Клон () а такжеУдалить() недоdisplay:contents приходит к стандартам.

На самом делеможно использовать в Firefox для тестирования(Скрипка).

$('#flex2 > div, #flex  > div').clone().insertAfter('#flex2');
$('#flex2 , #flex').remove();
.outer {
  display: flex;
  flex-direction: column;
}
#a {
  order: 4;
  background: #ccc;
}
#b {
  order: 1;
  background: #aaa;
}
#c {
  order: 3;
  background: #d33;
}
.one {
  order: 2;
  background: #aaa;
}
.two {
  order: 5;
  background: #aaa;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <div id="flex">
    <div id="a">A</div>
    <div id="b">B</div>
    <div id="c">C</div>
  </div>

  <div id="flex2">
    <div class="one">Show me 2nd</div>
    <div class="two">Show me 5th</div>
  </div>

</div>

1

которые не используют один и тот же контейнер:

Свойство 'order' управляет порядком, в котором flex-элементы появляются в их flex-контейнере, назначая их порядковым группам.

Soucre

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

Извини, приятель :) тогда ответа нет ... Itay Gal
«Для подтверждения HTML нельзя изменить». IVCatalina

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