I am currently creating a twitter clone, and I am attempting to style the signup page. So far, I am using css grid to order to main divs, with two columns on wide screens, and two rows on narrow screens.

On a wide screen, I would like the two divs to remain in one row, with the bird logo div being on the left, and the sign up form on the right. On screens narrower than 900px, I want the sign up form to remain at the top, and the bird logo div to remain at the bottom. How do I accomplish this? When shifting from columns to rows, I need some way to swap the order in which the div occurs.

body{
    margin: 0;
    padding: 0;
}

.signup{
    display: grid;
    grid-template-columns: 50% 50%;
    height: 100vh;
}

.left-side{
    display: grid;
    place-items: center;
    border: 1px solid black;
}

.right-side{
    border: 1px solid black;
}

.bird{
    transform: rotate(-10deg);
}


@media only screen and (max-width: 900px) {
    .signup{
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 80% auto;
        height: 140vh;
        background-color: cadetblue;
    }

  
}

  <div class="signup">
      <div class="left-side">
          <img src="" alt="bird" class="bird"/>
      </div>
      <div class="right-side">
          <h1>Sign up!</h1>
      </div>
  </div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

grid-area works fine for that

body{
    margin: 0;
    padding: 0;
}

.signup{
    display: grid;
    grid-template-areas: "form" "bird";
    height: 100vh;
}

.form {
    grid-area: form;
    border: 1px solid black;
}

.bird {
    display: grid;
    grid-area: bird;
    place-items: center;
    border: 1px solid black;
}

.bird-img{
    transform: rotate(-10deg);
}


@media only screen and (min-width: 901px) {
    .signup {
        grid-template-areas: "bird form";
        grid-template-columns: 1fr 1fr;
    }
}

@media only screen and (max-width: 900px) {
    .signup{
        grid-template-rows: 80% auto;
        height: 140vh;
        background-color: cadetblue;
    }
}

<div class="signup">
    <div class="form">
        <h1>Sign up!</h1>
    </div>
    <div class="bird">
        <img src="" alt="bird" class="bird-img"/>
    </div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I renamed .left-side and .right-side to match areas names

CodePudding user response：

Seems like a good candidate for display:flex with order.

body {
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
}

.signup,
.bird {
  flex: 1 1 50%;
}

@media only screen and (max-width: 900px) {
  .wrapper {
    display: block;
  }
}

.signup {
  background: papayawhip;
  order: 1
}

.bird {
  background: aqua
}

<div class="wrapper">
  <div class="signup">
    Signup
  </div>
  <div class="bird">
    bird
  </div>
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>