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 >
  <div >Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div >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>

CodePudding user response：

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 >
  <div >Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div >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>

CodePudding user response：

I hope this will solve your problem,

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

CodePudding user response：

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;
  }
}