Не отвечает Flexbox: изменение порядка элементов не будет работать - PullRequest
Новая
       6

Не отвечает Flexbox: изменение порядка элементов не будет работать

0 голосов
/ 05 сентября 2018

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

  body {
  font-family: 'Lato', sans-serif;
  font-size: 17px;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 auto;
}

header div {
  margin: auto 4vw;
}

header img {
  max-width: 100%;
  max-height: 100%;
}

header p {
  text-align: justify;
  text-justify: distribute;
}

@media only screen and (min-width: 767px) and (max-width: 961px) and (orientation: portrait) {
  body {
    max-width: 100%;
    font-size: 2em;
  }
  header {
    flex-flow: column-reverse nowrap;
    margin: 0 auto;
  }
  /* 	
    
    header :nth-child(1) {
    		order: 2;
    	}
    	header :nth-child(2) {
    		order: 1;
        } */
<header>
  <div class="landing-img">
    <img src="./images/home_talking.png" alt="home_work_happening">
  </div>
  <div>
    <h1>Where Work Happens</h1>
    <p>When your team needs to kick off a project, hire a new employee, deploy some code, review a sales contract, finalize next year's budget, measure an A/B test, plan your next office opening, and more, Slack has you covered.</p>
    <form>
      <input type="text" id="user-add" name="e-mail" placeholder="E-Mail Address">
    </form>
    <button type="button" name="button">GET STARTED</button>
    <p id="headerSignin">Already using Slack? <a href="#">Sign in</a></p>
  </div>
</header>

Ссылку JSFiddle можно найти здесь .

...