CSS Изменить порядок содержимого между столбцами

Вопрос выходит за рамки CSS и поэтому был закрыт.

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

На большие экраны мне нужны два столбца, а на маленькие экраны мне нужен один столбец - с содержимым в другом порядке и наоборот.

Я попытался показать макет на изображении ниже. Текстом записывается макет на больших видовых экранах и порядок полей.

Я бы очень хотел сохранить flex-columns, если это возможно. Я безуспешно пытался установить свойство order.

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

См. JSFiddle здесь

@media only screen and (min-width: 601px) {
  p {
    margin: 0;
  }
  .container {
    width: 100%;
    min-height: 100%;
    background: yellow;
    align-content: flex-start;
    display: flex;
    display: -webkit-flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
  }
  .flexcolumntop {
    flex: 50%;
    max-width: 50%;
    margin: 0;
  }
  .flexcolumnbottom {
    flex: 50%;
    max-width: 50%;
    margin: 0;
  }
  .red {
    background: red;
    width: 150px;
    height: 150px;
    text-align: center;
  }
  .blue {
    background: blue;
    width: 150px;
    height: 150px;
    text-align: center;
  }
  .green {
    background: green;
    width: 150px;
    height: 150px;
    text-align: center;
  }
  .lime {
    background: lime;
    width: 150px;
    height: 150px;
    text-align: center;
  }
  .pink {
    background: pink;
    width: 150px;
    height: 150px;
    text-align: center;
  }
  .gray {
    background: gray;
    width: 150px;
    height: 150px;
    text-align: center;
  }
}

@media only screen and (max-width: 600px) {
  p {
    margin: 0;
  }
  .container {
    width: 100%;
    min-height: 100%;
    background: yellow;
    align-content: flex-start;
    display: flex;
    display: -webkit-flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
  }
  .flexcolumntop {
    flex: 100%;
    max-width: 100%;
    margin: 0 auto;
  }
  .flexcolumnbottom {
    flex: 100%;
    max-width: 100%;
    margin: 0 auto;
  }
  .red p::before {
    content: "Order: 2";
  }
  .red {
    background: red;
    width: 150px;
    height: 150px;
    text-align: center;
  }
  .blue p::before {
    content: "Order 5: ";
  }
  .blue {
    background: blue;
    width: 150px;
    height: 150px;
    text-align: center;
  }
  .green p::before {
    content: "Order: 1";
  }
  .green {
    background: green;
    width: 150px;
    height: 150px;
    text-align: center;
  }
  .lime p::before {
    content: "Order: 4";
  }
  .lime {
    background: lime;
    width: 150px;
    height: 150px;
    text-align: center;
  }
  .pink p::before {
    content: "Order: 6";
  }
  .pink {
    background: pink;
    width: 150px;
    height: 150px;
    text-align: center;
  }
  .gray p::before {
    content: "Order: 3";
  }
  .gray {
    background: gray;
    width: 150px;
    height: 150px;
    text-align: center;
  }
}

<div class = "container">
  <div class = "flexcolumntop">
    <div class = "red">
      <p>
        Red
      </p>
    </div>
    <div class = "blue">
      <p>
        Blue
      </p>
    </div>
    <div class = "pink">
      <p>
        Pink
      </p>
    </div>
  </div>
  <div class = "flexcolumnbottom">
    <div class = "green">
      <p>
        Green
      </p>
    </div>
    <div class = "gray">
      <p>
        Gray
      </p>
    </div>
    <div class = "lime">
      <p>
        Lime
      </p>
    </div>
  </div>
</div>

вам нужно посмотреть запросы @media

— 23.09.2018 20:19

Этот вопрос выходит за рамки запросов @media. Мне нужно содержимое для изменения столбцов при изменении области просмотра

— 23.09.2018 20:21

Попробуйте использовать сетку.

— 23.09.2018 20:41

Это была моя первая мысль, но другие решения приветствуются, так что нет.

— 23.09.2018 21:14

html css

23.09.2018 20:05

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

С Grid layout вы можете определить шаблон, который определяет способ компоновки вашего субэлемента. Когда вы указываете grid-template-areas, вы определяете способ расположения ваших субэлементов под компоновкой сетки. И когда дело доходит до изменения порядка элементов в определенном окне просмотра, вам нужно будет просто изменить grid-template-areas и для каждого подэлемента определить grid-area, чтобы указать, где этот элемент будет

.container {
    width: 100%;
    min-height: 100%;
    background: yellow;
    align-content: flex-start;
    display: grid;
    grid-template-areas: "topblue topred"
                         "bottomgray bottomgreen";
}

.red {
    grid-area: topred;
    background: red;
    text-align: center;
}

.blue {
    grid-area: topblue;
    background: blue;
    text-align: center;
}

.green {
    grid-area: bottomgreen;
    background: green;
    text-align: center;
}

.gray {
    grid-area: bottomgray;
    background: gray;
    text-align: center;
}

@media all and (max-width: 600px) {
    .container {
        grid-template-areas: "topred"
                         "topblue"
                         "bottomgreen"
                         "bottomgray";
    }
}

<div class = "container">
    <div class = "red">
      Red <br /><br /> Column 2, Top
    </div>
    <div class = "blue">
      Blue <br /><br /> Column 1, Top
    </div>
    <div class = "green">
      Green <br /><br /> Column 2, Bottom
    </div>
    <div class = "gray">
      Gray <br /><br /> Column 1, Bottom
    </div>
</div>

Также помните о поддержка CSS-сетки браузером

Поразмыслив, кажется, что моя просьба требует дополнительных объяснений. Я указал это в коде.

— 24.09.2018 22:14

Вы можете просто изменить grid-template-areas, чтобы он выглядел так, как вы хотите, вы можете увидеть на каждом подэлементе, который я предоставляю, grid-area, чтобы указать, где он будет находиться на grid-tempate-areas.

— 24.09.2018 22:24

Что, если некоторые столбцы имеют динамическую высоту из-за длинного или короткого содержимого? AFAIK с использованием grid сделает ячейки одинаковой высоты.

— 25.09.2018 08:19

23.09.2018 20:57

Ответ принят как подходящий

Это легко решить с помощью flexbox и order, хотя вам придется избавиться от группировки с помощью гибких столбцов, как у вас сейчас (вы можете переупорядочить только столбцы внутри одного и того же родителя, поэтому это было бы невозможно сделать для ex. зеленый -> красный -> серый, если у них не будет одного и того же родителя).

Немного подправили css и добавили классы .morder, которые просто устанавливают порядок для мобильной версии. Также были внесены незначительные изменения в html (каждый из цветных элементов теперь имеет родительский элемент .flexcol, а элементы упорядочены по-разному - но этого можно было бы избежать, используя свойство order на рабочем столе, если это необходимо) :)

p {
  margin: 0;
}
.container {
  width: 100%;
  min-height: 100%;
  background: yellow;
  align-content: flex-start;
  display: flex;
  display: -webkit-flex;
  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
}
.flexcol {
  flex: 50%;
  margin: 0;
}
.red, .blue, .green, .lime, .pink, .gray {
  width: 150px;
  height: 150px;
  text-align: center;
}
.red {
  background: red;
}
.blue {
  background: blue;
}
.green {
  background: green;
}
.lime {
  background: lime;
}
.pink {
  background: pink;
}
.gray {
  background: gray;
}
  
@media only screen and (max-width: 600px) {
  .flexcol {
    flex: 100%;
  }
  .morder-1 {
    order: 1;
  }
  .morder-2 {
    order: 2;
  }
  .morder-3 {
    order: 3;
  }
  .morder-4 {
    order: 4;
  }
  .morder-5 {
    order: 5;
  }
  .morder-6{
    order: 6;
  }
}

<div class = "container">
  <div class = "flexcol morder-2">
    <div class = "red">
      <p>
        Red
      </p>
    </div>
  </div>
  <div class = "flexcol morder-1">
    <div class = "green">
      <p>
        Green
      </p>
    </div>
  </div>
  <div class = "flexcol morder-5">
    <div class = "blue">
      <p>
        Blue
      </p>
    </div>
  </div>
  <div class = "flexcol morder-3">
    <div class = "gray">
      <p>
        Gray
      </p>
    </div>
  </div>
  <div class = "flexcol morder-6">
    <div class = "pink">
      <p>
        Pink
      </p>
    </div>
  </div>
  <div class = "flexcol morder-4">
    <div class = "lime">
      <p>
        Lime
      </p>
    </div>
  </div>
</div>

Поразмыслив, кажется, что моя просьба требует дополнительных объяснений. Я указал это в коде.

— 24.09.2018 22:14

Мне нравится ваша мысль - сделать все div гибкими столбцами. Но что, если коробки не одинаковой высоты? Некоторые меньше и немного выше?

— 25.09.2018 08:46

Полагаю, это было бы похоже на «кладку».

— 25.09.2018 11:21

Я могу придумать один вариант (упорядочивание элементов flex в столбцы), но в основном это потребует от вас установки некоторой высоты в качестве «точки останова» для элементов. В основном что-то вроде этого: codepen.io/anon/pen/rZEMvN, но у него все равно будет много недостатков (вам, вероятно, придется использовать JS, и первый столбец всегда должен быть больше).

— 25.09.2018 11:36

Кроме того, если вы хотите кладки, почему бы вам не использовать библиотеку кладки? Или вариант №2 просто сгенерирует две версии html? (один для настольного компьютера, другой для мобильного).

— 25.09.2018 11:36

Я бы предпочел сохранить это в одной (адаптивной) версии, поскольку этот макет будет использоваться на многих страницах. Также я не хотел бы использовать какой-либо внешний источник CSS. Я считаю, что мне, возможно, придется переосмыслить ситуацию. Я, честно говоря, думал, что так будет проще. Хм...

— 25.09.2018 11:54

Ну, вы только что вошли в зону «не может быть решено без удвоения или js». :) В любом случае не уверен, почему «используется на многих страницах» означает, что вы не можете его удвоить.

— 25.09.2018 12:02

Какая замечательная зона: ') Я полагаю, что наличие HTML-страницы как для мобильных устройств, так и для настольных компьютеров потребует слишком большого обслуживания с контентом, или я не совсем понимаю, что вы имеете в виду?

— 25.09.2018 12:13

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

— 25.09.2018 12:14

Нет, я не использую CMS или что-то еще ... И я думаю, что мой подход будет с jQuery. Я уже нашел несколько хороших примеров, которые буду изучать :)

— 25.09.2018 12:18

Также я нашел это. Надеюсь, это когда-нибудь пригодится. Кладка только с CSS. w3bits.com/css-masonry

— 25.09.2018 12:56

@SimonJensen Ах да, думал о column-count раньше. Это действительно похоже на использование float в этом случае, но вы больше не можете контролировать положение элементов в контейнере, и я подумал, что это требование в вашем случае.

— 25.09.2018 13:06

Я только что это понял, и мне это нужно.

— 25.09.2018 13:07

23.09.2018 21:26