How do I get a website to change from two columns to one column with responsive design?

Question

I am making a simple web design where, on a web page, the logo and description are in the top right corner. The three images of bottles I have are in the bottom left corner.

I want to make the website responsive, but I want the 2 columns to change to one column when switching to a mobile screen. So on a smaller screen, the logo and description would be on-top of each other (like a hero-display) and the three images directly below it, horizontally aligned. How would I go about doing this?

Answer 1

If what I imagine from your question you are looking for could be achieved using Flex Box.

Run this example in full-page and shrink and expand the window to see the mobile breakpoint.

.top-nav {
  display: flex;
  justify-content: flex-end;
}

.bottles {
  display: flex;
}

@media (max-width: 768px) {
    .top-nav {
      justify-content: center;
    }
    .bottles {
      justify-content: center;
    }
}

<div class="top-nav">
  <span>Website Logo</span>
</div>

<div class="bottles">
  <span>Bottles</span>
</div>