CODEWITHSUNDEEP
htmlcssflexbox
Onder Akbulut
Onder Akbulut

Reputation: 50

Css column ordering

enter image description here

Hi all,

I have a design like an image and used bootstrap 5 for coding. I want to carry the sticky div area from the number one to the first div after on mobile. I can't use js. I tried to use CSS flexbox order but how can ı do that with only CSS?

I look forward to your ideas and suggestions. Thank you so much!

body {
    padding-top: 50px;
    padding-bottom: 600px;
}
.box  {
    width: 100%;
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:92px;
}
.box:nth-of-type(1) {
    background-color: #A7A7A7;
    height: 232px;
}
.box:nth-of-type(2) {
    background-color: #A7A7A7;
    height: 250px;
}
.box:nth-of-type(3) {
    background-color: #A7A7A7;
    height: 500px;
}
.sticky {
    background-color: #DDBEBE;
    width: 100%;
    height: 300px;
    position: sticky;
    top:0;
}
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="box">
                    1
                </div>
                <div class="box">
                    2
                </div>
                <div class="box">
                    3
                </div>
            </div>
            <div class="col-lg-6">
                <div class="sticky">
                    sticky area
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
        crossorigin="anonymous"></script>
</body>

</html>

Upvotes: 1

Views: 51

Answers (1)

Artyom Neustroev
Artyom Neustroev

Reputation: 8715

I doubt this is achieveable with flexbox alone. However, I managed to address your requirements with display: grid and some fiddling with grid-areas on the elements. This solution also defines a specific grid-template per screen resolution.

.container {
  display: grid;
  grid-template-areas:
    "box1 sticky"
    "box2 sticky"
    "box3 sticky";
}

@media (max-width: 1024px) {
  .container {
    grid-template-areas:
      "box1"
      "sticky"
      "box2"
      "box3";
  }
}

The caveat here is that each element has to have its dedicated grid-area value for the template, so won't work for the cases where you don't know the exact number of containers in play or such number is unreasonably high.

Hope this helps!

body {
  padding-top: 50px;
  padding-bottom: 600px;
}

.box {
  width: 100%;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 92px;
}

.box:nth-of-type(1) {
  background-color: #A7A7A7;
  height: 232px;
  grid-area: box1;
}

.box:nth-of-type(2) {
  background-color: #A7A7A7;
  height: 250px;
  grid-area: box2;
}

.box:nth-of-type(3) {
  background-color: #A7A7A7;
  height: 500px;
  grid-area: box3;
}

.sticky {
  order: 1;
  background-color: #DDBEBE;
  width: 100%;
  height: 300px;
  position: sticky;
  top: 0;
  grid-area: sticky;
}

.container {
  display: grid;
  grid-template-areas:
    "box1 sticky"
    "box2 sticky"
    "box3 sticky";
}
@media (max-width: 1024px) {
  .container {
    grid-template-areas:
      "box1"
      "sticky"
      "box2"
      "box3";
  }
  
  .sticky {
    position: static;
  }
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">

  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="container">
    <div class="box">
      1
    </div>
    <div class="box">
      2
    </div>
    <div class="box">
      3
    </div>
    <div class="sticky">
      sticky area
    </div>
  </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
</body>

</html>

Upvotes: 1

Related Questions