html - Responsive Page Header

Question

I have a simple structure for a normal page header (not a navbar), one that has text and button on the left side, and a product picture on the right side:

<div className="page-header-container">
 <div className="left-side">
  <div>Title </div>
  <div> Subtitle </div>
  <div> {button} </div>
 </div>
 <div className="right-side">
  <div>{picture} </div>
 </div>
</div>

What's the easiest way to make it responsive for mobile view, so the left side will stay at the top and the right side will go to the bottom just under it and aligned the same as the top?

Answer 1

Well, using flexbox it's pretty simple:

/* on mobile view (you can use media-query for instance) */
.page-header-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* if you want them to be aligned at the center */
}