Переупорядочение колонок стола на сайте - PullRequest
Новая
       40

Переупорядочение колонок стола на сайте

0 голосов
/ 03 ноября 2019

Я настроил веб-сайт конференции: http://www.nzbcs.org.nz/index.html.

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

Любая помощь очень ценится.

Ниже приведены @media коды в index.html. В "sites36f3.css" есть 159 @media записей. 

@media screen and (min-width: 767px) {
    .wsite-elements.wsite-not-footer:not(.wsite-header-elements) div.paragraph,
    .wsite-elements.wsite-not-footer:not(.wsite-header-elements) p,
    .wsite-elements.wsite-not-footer:not(.wsite-header-elements) .product-block .product-title,
    .wsite-elements.wsite-not-footer:not(.wsite-header-elements) .product-description,
    .wsite-elements.wsite-not-footer:not(.wsite-header-elements) .wsite-form-field label,
    .wsite-elements.wsite-not-footer:not(.wsite-header-elements) .wsite-form-field label,
    #wsite-content div.paragraph,
    #wsite-content p,
    #wsite-content .product-block .product-title,
    #wsite-content .product-description,
    #wsite-content .wsite-form-field label,
    #wsite-content .wsite-form-field label,
    .blog-sidebar div.paragraph,
    .blog-sidebar p,
    .blog-sidebar .wsite-form-field label,
    .blog-sidebar .wsite-form-field label {}
    #wsite-content div.paragraph,
    #wsite-content p,
    #wsite-content .product-block .product-title,
    #wsite-content .product-description,
    #wsite-content .wsite-form-field label,
    #wsite-content .wsite-form-field label,
    .blog-sidebar div.paragraph,
    .blog-sidebar p,
    .blog-sidebar .wsite-form-field label,
    .blog-sidebar .wsite-form-field label {}
    .wsite-elements.wsite-footer div.paragraph,
    .wsite-elements.wsite-footer p,
    .wsite-elements.wsite-footer .product-block .product-title,
    .wsite-elements.wsite-footer .product-description,
    .wsite-elements.wsite-footer .wsite-form-field label,
    .wsite-elements.wsite-footer .wsite-form-field label {}
    .wsite-elements.wsite-not-footer:not(.wsite-header-elements) h2,
    .wsite-elements.wsite-not-footer:not(.wsite-header-elements) .product-long .product-title,
    .wsite-elements.wsite-not-footer:not(.wsite-header-elements) .product-large .product-title,
    .wsite-elements.wsite-not-footer:not(.wsite-header-elements) .product-small .product-title,
    #wsite-content h2,
    #wsite-content .product-long .product-title,
    #wsite-content .product-large .product-title,
    #wsite-content .product-small .product-title,
    .blog-sidebar h2 {}
    #wsite-content h2,
    #wsite-content .product-long .product-title,
    #wsite-content .product-large .product-title,
    #wsite-content .product-small .product-title,
    .blog-sidebar h2 {}
    .wsite-elements.wsite-footer h2,
    .wsite-elements.wsite-footer .product-long .product-title,
    .wsite-elements.wsite-footer .product-large .product-title,
    .wsite-elements.wsite-footer .product-small .product-title {}
    #wsite-title {
        font-size: 30px !important;
    }
    .wsite-menu-default a {
        font-size: 13px !important;
    }
    .wsite-menu a {}
    .wsite-image div,
    .wsite-caption {}
    .galleryCaptionInnerText {}
    .fancybox-title {}
    .wslide-caption-text {}
    .wsite-phone {}
    .wsite-headline,
    .wsite-header-section .wsite-content-title {}
    .wsite-headline-paragraph,
    .wsite-header-section .paragraph {}
    .wsite-button-inner {}
    .wsite-not-footer blockquote {}
    .wsite-footer blockquote {}
    .blog-header h2 a {}
    #wsite-content h2.wsite-product-title {}
    .wsite-product .wsite-product-price a {}
}

1 Ответ

1 голос
/ 04 ноября 2019

Я скопировал основную часть вашего веб-сайта для демонстрации.

Вы можете изменить порядок столбцов, используя display: flex, а также установить order для дочерних элементов.

Пример ниже для перестановки столбцов макета для вашего HTML.

Вы можете узнать больше здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items

Кроме того, я хотел бы предостеречь, цитируя приведенную выше ссылку:

Свойство заказа и доступность

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

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

.flex {
  display: flex;
}

.flex :nth-child(1) {
  order: 3;
}

.flex :nth-child(2) {
  order: 1;
}

.flex :nth-child(3) {
  order: 2;
}

.wsite-multicol-table {
  position: relative;
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  margin: 0 !important;
  border: 0 !important;
  padding: 0 !important;
}

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}

.wsite-multicol-col {
  vertical-align: top;
  margin: 0 !important;
  border: 0 !important;
  padding: 0;
  -moz-box-sizing: border-box;
}
<table class="wsite-multicol-table">
  <tbody class="wsite-multicol-tbody">
    <tr class="wsite-multicol-tr flex">
      <td class="wsite-multicol-col" style="width:22.666666666667%;padding:0 15px;order: 10;">column 1<br>stuff</td>
      <td class="wsite-multicol-col" style="width:56.816326530612%;padding:0 15px;order: 0;">column 2<br>more stuff</td>
      <td class="wsite-multicol-col" style="width:20.517006802721%; padding:0 15px;">column 3<br>other stuff</td>
    </tr>
  </tbody>
</table>

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

Кроме того, если вы хотите показывать по-другому на мобильных устройствах, вам может понадобиться использовать медиазапросы CSS, обычно с объявлением @media. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Для медиа-запросов обычно мы контролируем по размеру экрана, источник: https://stackoverflow.com/a/16443861/498031

@media only screen and (min-width: 768px) {
    /* tablets and desktop */
}

@media only screen and (max-width: 767px) {
    /* phones */
  .flex {
    ...
  }
  .flex :nth-child(n) {
    ...
  }
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    /* portrait phones */
}
...