Ivan Topić Ivan Topić - 5 months ago 11
CSS Question

Break nested flex div on mobile phones

Fiddle

I have 2 main sections in each row, each section has an image and some text. How can I split these sections in new line on media query for mobile phones? If I put

display-direction: column;
on
.row-flex
then image AND text will also break and I don't want that. I want them to split like it is in image

SS



.row-flex {
display: flex;
}
.col-1 {
flex: 1;
}
.col-2 {
flex: 3;
}

<div class="row-flex">

<a href="#" class="col-1">
<img src="http://placehold.it/90x90">
</a>

<div class="col-2">
<p>text text text text text text text text</p>
</div>


<a href="#" class="col-1">
<img src="http://placehold.it/90x90">
</a>

<div class="col-2">
<p>text text text text text text text text</p>
</div>

</div>




Answer

There is no such display-direction: column, what you are looking for is: flex-direction: column, and you need to wrap the elements to make them display:flex in a row

.row-flex {
  display: flex;
  flex-direction: column;
}
.col-1,
.col-2 {
  display: flex
}
.col-1 div {
  flex: 1;
}
.col-2 div {
  flex: 3;
}
<div class="row-flex">
  <div class="col-1">
    <a href="#">
      <img src="http://placehold.it/90x90">
    </a>
    <div>
      <p>text text text text text text text text</p>
    </div>
  </div>
  <div class="col-2">
    <a href="#">
      <img src="http://placehold.it/90x90">
    </a>
    <div>
      <p>text text text text text text text text</p>
    </div>
  </div>

</div>

Comments