Flexbox Gallery With Wrapping

Question

I am trying to create a responsive image gallery for my website using a flexbox. However, I am trying to make it wrap to the next line and stay in order, which I am having trouble with. For example:

Desktop
1,2,3
4,5,6 etc
Tablet
1,2
3,4 etc
Mobile
1
2 etc

Please see the example code I included.

.row {
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex: 33%;
  max-width: 33%;
}

.column img {
  vertical-align: middle;
  width: 100%;
}

@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

<div class="row">
  <div class="column">
    <figure>
      <img src="https://img.webnots.com/2014/04/112.png">
      <figcaption>Caption 1</figcaption>
    </figure>
    <figure>
      <img src="https://img.webnots.com/2014/04/42.png">
      <figcaption>Caption 4</figcaption>
    </figure>
  </div>
  <div class="column">
    <figure>
      <img src="https://img.webnots.com/2014/04/22.png">
      <figcaption>Caption 2</figcaption>
    </figure>
    <figure>
      <img src="https://img.webnots.com/2014/04/52.png">
      <figcaption>Caption 5</figcaption>
    </figure>
  </div>
  <div class="column">
    <figure>
      <img src="https://img.webnots.com/2014/04/32.png">
      <figcaption>Caption 3</figcaption>
    </figure>
    <figure>
      <img src="https://img.webnots.com/2014/04/62.png">
      <figcaption>Caption 6</figcaption>
    </figure>
  </div>
</div>

Answer 1

Your HTML elements are set up incorrectly. To achieve what you want, you shouldn't put in the same element "first" and "fourth". While it looks good on desktop, you won't be able to put element "second" or "third" between them. You will only be able to change the position of those elements inside of the . Very basic HTML and CSS stuff.

I would advise you to rename class "column" to "cell" and put them in order:

<div class="row">
  <div class="cell">
    <figure>
      <img src="https://img.webnots.com/2014/04/112.png">
      <figcaption>Caption 1</figcaption>
    </figure>
   </div>
   <div class="cell">
    <figure>
      <img src="https://img.webnots.com/2014/04/112.png">
      <figcaption>Caption 2</figcaption>
    </figure>
   </div>
   <div class="cell">
    <figure>
      <img src="https://img.webnots.com/2014/04/112.png">
      <figcaption>Caption 3</figcaption>
    </figure>
   </div>
   <div class="cell">
    <figure>
      <img src="https://img.webnots.com/2014/04/112.png">
      <figcaption>Caption 4</figcaption>
    </figure>
   </div>
   <div class="cell">
    <figure>
      <img src="https://img.webnots.com/2014/04/112.png">
      <figcaption>Caption 5</figcaption>
    </figure>
   </div>
   <div class="cell">
    <figure>
      <img src="https://img.webnots.com/2014/04/112.png">
      <figcaption>Caption 6</figcaption>
    </figure>
   </div>
</div>

And of course in your CSS file change the .column to .cell

This way you will achieve your wanted responsive look on tablet and mobile.