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

March 10, 2022

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>

>Solution :

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>