Question 137042 in CSS Question posted in
Some basic documentation can be found here.

Css – Change the layout order with media queries

This is an example of the desktop version on the left and the mobile version on the right.

enter image description here

On desktop I want to put the div 2 on the right and separating the parent div into two sections, I have tried flexbox (shrink, grow, directions…) but I was unable to achieve this result.

Is it even possible to do?

Thank you!

Tags:

2

Answers


  1. 0

    You can achieve that by combining flex and grid alongside tailwind breakpoints. So on mobile devices is just flex column and on desktop is grid with 2 columns and 3 rows where second element spans across the three rows:

        <div className="flex flex-col md:grid grid-cols-2 grid-rows-3">
        <div className="border-2 border-indigo-600 p-3">1</div>
        <div className="border-2 border-indigo-600 p-3 col-start-2 row-span-3">
          2
        </div>
        <div className="border-2 border-indigo-600 p-3">3</div>
        <div className="border-2 border-indigo-600 p-3">4</div>
      </div>

    Here’s a link to test: https://stackblitz.com/edit/react-epcw4d?file=src%2FApp.js,src%2Findex.js

    Login or Signup to reply.
  2. 0

    Like this

    div {
  outline: 1px solid black;
}
.container {
  display: grid;
}
.one {
  grid-area: one;
}
.two {
  grid-area: two;
}
.three {
  grid-area: three;
}
.four {
  grid-area: four;
}

@media only screen and (max-width: 600px) {
  .container{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
      "one"
      "two"
      "three"
      "four";
  }
}

@media only screen and (min-width: 600px) {
  .container{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-template-areas:
      "one two"
      "three two"
      "four two";
  }
}
    <div class=container>
  <div class=one>1
  </div>
  <div class=two>2
  </div>
  <div class=three>3
  </div>
  <div class=four>4
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search