'How can I get my flex layout to stack for mobile?

I want to have the second column drop down below the first column when I resize the page to smart phone size.

Thank you for your help!

.row {
  display: flex;
  /* equal height of the children */
}

.col {
  flex: 1;
  /* additionally, equal width */
  padding: 1em;
  border: solid;
}

@media screen and (min-width:760px) {
  .row {
display: column;

  }
<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>
htmlcss


Solution 1:[1]

I did a few things here.

  • Set the initial flex direction to column. Working "mobile first" is a good strategy.
  • Set the flex direction to row at your breakpoint.
  • Fixed the syntax of your media query.
  • Renamed your classes to be more semantically correct. (A row isn't a row if it's a column.)

.flex-outer {
  display: flex;
  flex-direction: column;
}

.flex-inner {
  flex: 1;
  padding: 1em;
  border: solid;
}

@media (min-width: 700px) {
  .flex-outer {
    flex-direction: row;
  }
}
<div class="flex-outer">
  <div class="flex-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="flex-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

Solution 2:[2]

I hope this will solve your problem,

@media (max-width:700px) {
      .row{
        flex-direction:column;
      }
    }

Solution 3:[3]

You're using flex correctly. The last thing you need to fill up is media query with flex-direction: column;

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1;
  padding: 1em;
  border: solid;
}

/* you can use your own media query target for mobile */
@media (max-width:480px) {
  .row{
    flex-direction: column;
  }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 QuantumX
Solution 3 Nick Vu

Related Questions