The positioning of the div in the Flex layout changes depending on the device - on desktop it appears below other elements, while

Question

The positioning of the div in the Flex layout changes depending on the device - on desktop it appears below other elements, while

I am working on my first flex layout and I need help with achieving the desired placement for sections on both desktop and small devices (please refer to the attached photo).

The "License" div should change its order depending on screen width: on mobile devices it should be displayed last, but on desktop it needs to appear right after the text in the first column on the left.

Do you think this is achievable with just flex? Or should I consider using the grid layout model instead?

My flex example is simple except for the issue on desktop where I have had to use a workaround (like the ".break-column" CSS rule) to position the "license" div below due to the "flex-direction: row;" property.

Currently, the design works as intended on mobile devices but the "license" div is still shown last on desktop. It's possible that my HTML structure is incorrect. Any guidance in the right direction would be greatly appreciated!

Thank you in advance!

Link to Example

https://i.sstatic.net/nz0ii.png

html css layout flexbox responsive

Answer 1

Answer №1

To achieve the desired layout using flexbox, you have two options:

One approach is to utilize JavaScript by adding a resize event listener on the window. When the screen width reduces below a certain threshold, move the .content-license element to the bottom of the webpage.
Alternatively, you can duplicate the .content-license element. One instance can be placed within the .content__wrapper, while the other can be positioned at the end of the page. On larger screens, hide the duplicate at the end of the page, and on smaller screens, hide the one in the .content__wrapper.

The provided code snippet adopts the latter strategy, eliminating the need for JavaScript implementation.

.home__flex {
  display: flex;
  background: rgb(230, 253, 214);
  flex-wrap: wrap;
}

.cover__wrapper {
  display: flex;
  flex-direction: column;
  padding: 15px;
}

.content-license {
  padding: 15px;
}

.cover__wrapper .content-license {
  display: none;
  padding: 0;
}

.cover__wrapper img {
  width: 50%;
  height: 200px;
  align-self: center;
}

.links__wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  padding: 15px;
}

@media (min-width: 550px) {
  .content-license {
    display: none;
  }
  .cover__wrapper .content-license {
    display: block;
  }
}

@media (min-width: 750px) {
  .cover__wrapper {
    flex-basis: 20%;
    padding: 35px;
  }
  .cover__wrapper img {
    width: 100%;
  }
}

@media (min-width: 850px) {
  .cover__wrapper {
    flex-basis: 20%;
  }
  .links__wrapper {
    padding: 0 35px;
  }
}

<div class="container__home">
  <div class="home__flex">
    <div class="cover__wrapper">
      <img class="cover" src="https://i.ibb.co/Kx6Hm9w/dang.png" alt="dang" border="0">
      <div class="content-descr">
        <p>
          Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin, though it looks like it, and it actually says nothing, After magazine answered a curious reader.
        </p>
      </div>
      <div class="content-license">
        <h2>Licence</h2>
        <p>
          Licensed under a Creative Commons attribution-noncommercial license.
        </p>
      </div>
    </div>
    <div class="links__wrapper">
      <div class="table-of-contents">
        <h1>Content</h1>
        <ol>
          <li>Until recently, the prevailing view </li>
          <li>It's not Latin, though it looks</li>
          <li>Its ‘words’ loosely approximate the frequency</li>
          ... (additional list items)
        </ol>
      </div>
      <div class="other-links">
        <h2>Other</h2>
        <ul class="links">
          <li><a href="code">After magazine</a></li>
          <li><a href="errata.html">looks pretty cool</a></li>
          <li><a href="/">Lots of laugh</a></li>
        </ul>
      </div>
    </div>
    <div class="break-column"></div>
    <div class="content-license">
      <h2>Licence</h2>
      <p>
        Licensed under a Creative Commons attribution-noncommercial license.
      </p>
    </div>
  </div>
</div>

Answer 2

To achieve the desired layout using flexbox, you have two options:

One approach is to utilize JavaScript by adding a resize event listener on the window. When the screen width reduces below a certain threshold, move the .content-license element to the bottom of the webpage.
Alternatively, you can duplicate the .content-license element. One instance can be placed within the .content__wrapper, while the other can be positioned at the end of the page. On larger screens, hide the duplicate at the end of the page, and on smaller screens, hide the one in the .content__wrapper.

The provided code snippet adopts the latter strategy, eliminating the need for JavaScript implementation.

.home__flex {
  display: flex;
  background: rgb(230, 253, 214);
  flex-wrap: wrap;
}

.cover__wrapper {
  display: flex;
  flex-direction: column;
  padding: 15px;
}

.content-license {
  padding: 15px;
}

.cover__wrapper .content-license {
  display: none;
  padding: 0;
}

.cover__wrapper img {
  width: 50%;
  height: 200px;
  align-self: center;
}

.links__wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  padding: 15px;
}

@media (min-width: 550px) {
  .content-license {
    display: none;
  }
  .cover__wrapper .content-license {
    display: block;
  }
}

@media (min-width: 750px) {
  .cover__wrapper {
    flex-basis: 20%;
    padding: 35px;
  }
  .cover__wrapper img {
    width: 100%;
  }
}

@media (min-width: 850px) {
  .cover__wrapper {
    flex-basis: 20%;
  }
  .links__wrapper {
    padding: 0 35px;
  }
}

<div class="container__home">
  <div class="home__flex">
    <div class="cover__wrapper">
      <img class="cover" src="https://i.ibb.co/Kx6Hm9w/dang.png" alt="dang" border="0">
      <div class="content-descr">
        <p>
          Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin, though it looks like it, and it actually says nothing, After magazine answered a curious reader.
        </p>
      </div>
      <div class="content-license">
        <h2>Licence</h2>
        <p>
          Licensed under a Creative Commons attribution-noncommercial license.
        </p>
      </div>
    </div>
    <div class="links__wrapper">
      <div class="table-of-contents">
        <h1>Content</h1>
        <ol>
          <li>Until recently, the prevailing view </li>
          <li>It's not Latin, though it looks</li>
          <li>Its ‘words’ loosely approximate the frequency</li>
          ... (additional list items)
        </ol>
      </div>
      <div class="other-links">
        <h2>Other</h2>
        <ul class="links">
          <li><a href="code">After magazine</a></li>
          <li><a href="errata.html">looks pretty cool</a></li>
          <li><a href="/">Lots of laugh</a></li>
        </ul>
      </div>
    </div>
    <div class="break-column"></div>
    <div class="content-license">
      <h2>Licence</h2>
      <p>
        Licensed under a Creative Commons attribution-noncommercial license.
      </p>
    </div>
  </div>
</div>

Answer 3

Answer №2

Your question is a bit unclear, but if you're looking to adjust the order of your divs using flexbox, you can utilize the order property along with @media queries. This will allow you to rearrange your elements based on screen size.

Here's an example:

.container {
    display: flex;
}

@media (min-width: 600px) {
    .div-1 { order: 2; }
    .div-2 { order: 1; }
    .div-3 { order: 3; }
}

This code snippet will change the order of the divs within the container at a screen width of 600px or larger. Make sure to assign each div a specific order value for this to work correctly.

For further guidance on flexbox, you can visit W3Schools Flexbox. You can also experiment with it using the W3Schools Editor.

Answer 4

Your question is a bit unclear, but if you're looking to adjust the order of your divs using flexbox, you can utilize the order property along with @media queries. This will allow you to rearrange your elements based on screen size.

Here's an example:

.container {
    display: flex;
}

@media (min-width: 600px) {
    .div-1 { order: 2; }
    .div-2 { order: 1; }
    .div-3 { order: 3; }
}

This code snippet will change the order of the divs within the container at a screen width of 600px or larger. Make sure to assign each div a specific order value for this to work correctly.

For further guidance on flexbox, you can visit W3Schools Flexbox. You can also experiment with it using the W3Schools Editor.

The positioning of the div in the Flex layout changes depending on the device - on desktop it appears below other elements, while

Answer №1

Answer №2

Similar questions

How can I display only a horizontal scrollbar on the body content while avoiding an excessively long image header?

VueError: Unable to sort ad performance data

What caused Safari to only show half of the page?

Chrome-derived web browsers are failing to properly display the <span> element when pre-wrap is configured

Customizing active-class in Vuetify

What is the process for locating and displaying a database in WordPress?

Injecting a variety of wallpapers dynamically using css and html

I aim to utilize JavaScript to capture the constantly changing font color that is randomly generated

Position a button to be aligned with the bottom of its container

Alignment issues with columns in Bootstrap

Tips for eliminating the additional spacing that might occur between the logo and the content

Stop the form from refreshing upon submission using an Ajax call in AngularJS

When the cursor hovers over an item, I would like to enlarge its width while simultaneously shrinking the width of two additional items

Decrease the amount of empty space when adjusting the window size

The transition effect does not seem to be functioning correctly when adding a class

Struggling to identify which css or bootstrap statement is impacting the arrangement of the form layout

I'm new to this, but can someone explain why I'm being redirected to the register_db.php page when I click on the register button?

Struggles between ajax asp.net and jquery colliding

The iframe is being loaded in the center of the page rather than at the top

"Encountering a Challenge with Setting Up Forms on