Breaking the grid

A designer gave me a template that featured a row containing a 3-step process. Below the steps was a row of three images. I mistakenly designed the rows as two separate rows, not realizing that each image actually corresponded to a step. The appearance was fine in desktop, but in mobile, the images were not attached to their corresponding steps and appeared together in a sequence.

Although I could have gone back in to redesign the columns and include the image within each step, I used somewhat of a hack to take care of the column ordering for me to save myself the time of redefining margins and paddings for the images vs. the step description.

I went back into the code and gave each of the six columns its own class and used flexbox ordering to reorder the columns to achieve the mobile view above:

@include tablet {

  .one {
    order: 1;
  }

  .two {
    order: 3;
  }

  .three {
    order: 5;
  }

  .four {
    order: 2;
  }

  .five {
    order: 4;
  }

  .six {
    order: 6;
  }

}