Как использовать css-order с materialize? - PullRequest
Новая
       15

Как использовать css-order с materialize?

0 голосов
/ 19 апреля 2019

Я использую библиотеку материализации для своего реактивного проекта. Когда я использую стиль col s12 l6, я хотел бы изменить порядок col s, когда дело доходит до мобильного телефона. Есть ли по умолчанию библиотека? Я прочитал что-то о push и pull, которое не сработало, и не обернул col s в div и попытался использовать стиль order: 1 / order: 2 для них. Есть предложения? 

// index.html

<div className="wrapper1">
    <div col s12 l6>
      some text
  </div>
</div>
<div className="wrapper2">
    <div col s12 l6>
      some more text
    </div>
</div>

// main.css

.wrapper1 {
    @media only screen and (max-width: $mobile) {
      order: 2
    }
}

.wrapper2 {
    @media only screen and (max-width: $mobile) {
      order: 1
    }
}

Ожидаемый результат: 

//on desktop

some text
some more text

//on mobile

some more text
some text

1 Ответ

0 голосов
/ 23 апреля 2019

В вашем коде слишком много ошибок.

Я бы посоветовал вам сначала пройтись по основам HTML и CSS, прежде чем начинать с чего-то еще.

Я исправили обновил ваши разметки и медиа-запросы, чтобы исправить все ошибки. 

.wrapper {
  display: flex;
  flex-direction: column
}

@media only screen and (max-width: 767px) {
  .wrapper1 {
    order: 2
  }
  .wrapper2 {
    order: 1
  }
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
 
<body>
  <div class="wrapper">
    <div class="wrapper1">
      <div class="col s12 l6">
        some text
      </div>
    </div>
    <div class="wrapper2">
      <div class="col s12 l6">
        some more text
      </div>
    </div>
  </div>
</body>
...