flexbox - Different alignment of elements in CSS Grid or Flex after a line break

Question

I suggest running the code snippet below to better understand this question, as it is a layout question, and visually easier to understand.

I have an element on my page that needs to display one item (a Title) aligned to the left, and another item (Date/Time) aligned to the right, in the same "row". I accomplished this easily using CSS Grid.

My designer told me that when we display on a mobile device, it should instead show the Title left-aligned, and the Date/Time below that on the next line, ALSO left-aligned. CSS Flex does this with grace.

Is there a way to make either CSS Grid or CSS Flex do both of these things, without jumping through hoops?

What I'm trying to avoid is having to write a slew of @media breakpoints, and just handle it organically instead, if possible.

Thanks for any advice you can offer.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-weight: bold;
}

.date {
  justify-self: end;
}

.flex-container {
  display: flex;
  flex-direction: column;
  font-weight: bold;
}

When on a wide device screen (e.g. Desktop Web Browser) I want the layout to look like this. The title should be on the left and left aligned, the date/time should be on the right and right aligned. The should adjust with the page width.
<p>
  <div class="container">
    <div>Some Title</div>
    <div class="date">01/26/2021 10:30am</div>
  </div>
</p>

However, when on a small device screen (e.g. smart phone) the Title should appear on one line, left aligned, and the Date/Time should appear below it, also left aligned.
<p>
  <div class="flex-container">
    <div>Some Title</div>
    <div class="date">01/26/2021 10:30am</div>
  </div>
</p>

Is there a way to accomplish this easily, hopefully using CSS Grid or Flex, rather than hard coding CSS changed to breakpoints? 

question from:https://stackoverflow.com/questions/65911833/different-alignment-of-elements-in-css-grid-or-flex-after-a-line-break

Answer 1

Flexbox is really all you need.

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

<div class="container">
  <div>Some Title</div>
  <div class="date">01/26/2021 10:30am</div>
</div>