Question 270975 in Html Question posted in
Some basic documentation can be found here.

Html – How do I make two columns collapse into one if screen is too narrow?

I need to know how to make two columns of text collapse if the screen gets too small (like switching from desktop to a cell phone). I don’t care if tables are used, or divs or whatever.
For example, if I had 2 columns, 3 lines each, like this:

Line 1   Line 4
Line 2   Line 5
Line 3   Line 6

If the 2 columns can’t fit on the screen, I know how to make one drop below the other like this:

Line 1
Line 2
Line 3
Line 4
Line 5
Line 6

What if my columns were arranged like this though:

Line 1   Line 2
Line 3   Line 4
Line 5   Line 6

If the screen gets too small I would get this:

Line 1
Line 3
Line 5
Line 2
Line 4
Line 6

I still want:

Line 1
Line 2
Line 3
Line 4
Line 5
Line 6

Any thoughts on how to achieve this?

Tags:

2

Answers


  1. 0

    Check out this example:
    https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_flex

    Embedded:

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Container for flexboxes */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Create four equal columns */
.column {
  flex: 25%;
  padding: 20px;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}
</style>
</head>
<body>

<h2>Responsive Four Column Layout with Flex</h2>
<p><strong>Resize the browser window to see the responsive effect.</strong> On screens that are 992px wide or less, the columns will resize from four columns to two columns. On screens that are 600px wide or less, the columns will stack on top of each other instead of next to eachother.</p>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  
  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
  
  <div class="column" style="background-color:#ddd;">
    <h2>Column 4</h2>
    <p>Some text..</p>
  </div>
</div>

</body>
</html>
    Login or Signup to reply.
  2. 0

    You could solve this with using a grid layout with two rows that changes once the screen is getting smaller than a desired threshold (with media query).

    To start I define a simple html example:

    <div class="container">
    <div>Line 1</div>
    <div>Line 2</div>
    <div>Line 3</div>
    <div>Line 4</div>
    <div>Line 5</div>
    <div>Line 6</div>
</div>

    And then in your css file:

    .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 500px) {
    /* choose your desired threshold */
    .container {
        grid-template-columns: 1fr; /* On smaller screens, switch to a single column */
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search