Alignement push-right and push-left

[toplisek]

I have an issue as on the left-hand side it is push-left CSS within class and on the right-hand side it is push-right CSS within class.

But a problem rise when a mobile resolution is a lower space, I need to push right-hand side under left-hand side content.

An example:

Author:                                                                                                               Published:

will need to be published on mobile lower resolution like
Author:
Published:

How to manage using CSS?

[DaveMaxwell]

Dun Dun Duuuuuunnn! Flex to the rescue!

<div class="flex">
  <div> Author: John Smith</div>
  <div> Published: 10 April 2023</div>
</div>

and the css (border just added to make it easy to see…)

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}
.flex > * {
  border: 1px solid red;
  flex-shrink: 0;
}

Wide viewport:

Narrow viewport:

[toplisek]

Thank you for the message. Another option is an old way using block element and text-align: left for the lower resolution as float will not work.

[PaulOB]

@toplisek

Another option is an old way using block element and text-align: left for the lower resolution

The benefit of Dave’s approach is that no media queries are required. The text will automatically align properly when it no longer fits on one line.

Your method would have to take into account how many words are in each part and then make a guess where the media query needs to be set. Someone with a very long name may break your breakpoint.

If I’m not mistaken push-left and right classes are a bootstrap construct and already have built in version for breakpoints anyway. You would just need to use the right class for the screen size where you want them to take effect. Refer to the documentation for more info.