CSS 2 column layout with variable heights and different mobile/desktop layout-CodePudding

Is there a way to build a 2 column layout so that each item can be of dynamic height and has a different order on mobile as can be seen here?

I've been able to partially achieve this by wrapping the left and right elements in their own div however, there doesn't seem to be a way to re-order elements outside of their column div for the mobile view:

.parent {
  display: grid;
  grid-template: auto / 1fr;
}

.column-left {
  align-self: start;
  grid-row: 1;
}

.column-right {
  align-self: start;
  grid-row: 2;
}

@media screen and (min-width: 600px) {
  .parent {
    grid-template: auto / repeat(8, 1fr);
  }
  
  .column-left {
    grid-column: 1 / 4;
    grid-row: auto;
  }
  
  .column-right {
    grid-column: 4 / 9;
    grid-row: auto;
  }
}

.item {
  border: 1px solid black;
  text-align: center;
  font-size: 2rem;
}

#item-a {
  height: 140px;
  background-color: red;
}

#item-b {
  height: 180px;
  background-color: blue;
}

#item-c {
  height: 220px;
  background-color: green;
}

#item-d {
  height: 300px;
  background-color: yellow;
}

<div >
  <div >
    <div id="item-a" >A</div>
    <div id="item-b" >B</div>
  </div>
  <div >
    <div id="item-c" >C</div>
    <div id="item-d" >D</div>
  </div>
</div>

CodePudding user response：

I don't think you can in css since you want to move an item from a column to an other one. It may not be what you want but this is the solution I found :

.container{
  width:100px;
  display:flex;
  flex-wrap: wrap;
  border:1px solid black;
}

#a{
  background-color:red;
}
#b{
  background-color:blue;
}
#c{
  background-color:green;
}
#d{
  background-color:yellow;
}

.item{
  width:100%;
  text-align:center;
}

.order-1{
  order: 1;
}
.order-2{
  order: 2;  
}
.order-3{
  order: 3;  
}
.order-4{
  order: 4;  
}

@media screen and (min-width: 992px) {
  .item{
    width:50%;
  }
  .order-lg-1{
    order: 1;
  }
  .order-lg-2{
    order: 2;
  }
  .order-lg-3{
    order: 3;  
  }
  .order-lg-4{
    order: 4;  
  }
}

<div >
  <div id="a" >A <br> A</div>
  <div id="b" >B</div>
  <div id="c" >C <br> C <br> C</div>
  <div id="d" >D <br> D </div>
</div>

Check Full Page to see the difference in larger screen

CodePudding user response：

I would suggest you to use Bootstrap 5. Because you want some specific order, you need to have two different layouts (see comments in HTML).

.col-12 {
  background-color: orangered;
  height: auto;
}

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv l9liuYLaMQ/" crossorigin="anonymous"></script>

</head>

<body>

  <div >
    <!-- Desktop -->
    <div >
      <div >
        <div >
          <div >A</div>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, corporis aspernatur eius voluptas explicabo minima dolore ea optio, officiis quibusdam deleniti ut rerum mollitia, eum temporibus eaque qui dicta minus?
          <br><br> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus quasi nesciunt, totam molestiae dolor pariatur? Officiis, reiciendis fugiat quisquam, sint nihil sapiente fuga vitae, architecto maiores expedita inventore facilis accusamus.
        </div>
        <div >
          <div >B</div>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora iusto magnam dolore quidem modi laborum aliquam ab harum at, repellat architecto itaque sequi molestiae illum provident pariatur maxime culpa veniam.
        </div>
      </div>
      <div >
        <div >
          <div >C</div>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quas amet quae ut non sequi blanditiis odio adipisci corporis, quaerat nostrum ex cumque. Distinctio soluta rem quidem nulla mollitia voluptatibus.
          <br><br> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deserunt at saepe id reiciendis in aperiam eveniet, eligendi, ut temporibus commodi obcaecati itaque quia velit neque vero quibusdam doloribus, ab ratione.
        </div>
        <div >
          <div >D</div>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea voluptatem sunt dolores assumenda fugiat, ducimus asperiores corporis veniam quos ipsam earum blanditiis odio. Architecto totam vitae nesciunt aut nobis impedit.
        </div>
      </div>
    </div>

    <!-- Mobile -->
    <div >
      <div >
        <div >A</div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, corporis aspernatur eius voluptas explicabo minima dolore ea optio, officiis quibusdam deleniti ut rerum mollitia, eum temporibus eaque qui dicta minus?
        <br><br> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus quasi nesciunt, totam molestiae dolor pariatur? Officiis, reiciendis fugiat quisquam, sint nihil sapiente fuga vitae, architecto maiores expedita inventore facilis accusamus.
      </div>
      <div >
        <div >B</div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora iusto magnam dolore quidem modi laborum aliquam ab harum at, repellat architecto itaque sequi molestiae illum provident pariatur maxime culpa veniam.
      </div>
      <div >
        <div >C</div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quas amet quae ut non sequi blanditiis odio adipisci corporis, quaerat nostrum ex cumque. Distinctio soluta rem quidem nulla mollitia voluptatibus.
        <br><br> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deserunt at saepe id reiciendis in aperiam eveniet, eligendi, ut temporibus commodi obcaecati itaque quia velit neque vero quibusdam doloribus, ab ratione.
      </div>
      <div >
        <div >D</div>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea voluptatem sunt dolores assumenda fugiat, ducimus asperiores corporis veniam quos ipsam earum blanditiis odio. Architecto totam vitae nesciunt aut nobis impedit.
      </div>
    </div>
  </div>

</body>

</html>